/* Netsense home page styles. Loaded only on /. */
.section-shell {padding: 34px 0}

.section-shell>.container,
.additional .container,
.integrations .container {border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 34px 28px;
  background: linear-gradient(115deg,rgba(9,22,28,.72),rgba(3,11,15,.35));
  box-shadow: var(--shadow)}

.hero {padding: 42px 0 0}

.hero-grid {display: grid;
  grid-template-columns: .82fr 1.25fr;
  align-items: center;
  min-height: 560px}

.hero-copy {padding-left: 6px;
  position: relative;
  z-index: 2}

.eyebrow {display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  border: 1px solid #2f4637;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 26px}

.eyebrow svg {width: 16px;
  height: 16px}

.hero h1 {font-size: clamp(48px,4.35vw,70px);
  line-height: 1.05;
  letter-spacing: -.045em;
  margin: 0 0 28px;
  font-weight: 650}

.hero h1 span {color: var(--green-2)}

.hero-copy>p {font-size: 18px;
  line-height: 1.7;
  color: #c1c6c7;
  max-width: 570px;
  margin-bottom: 34px}

.hero-actions {display: flex;
  gap: 20px}

.hero-art {margin-left: -60px;
  margin-right: -42px}

.hero-art img {width: 100%;
  height: auto}

.metrics-band {background: transparent}

.metrics {display: grid;
  grid-template-columns: repeat(5,1fr);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 25px 0}

@media (min-width:901px) {
.metrics-band {border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(4,14,19,.7)}
}

.metric {display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 0 24px;
  border-right: 1px solid var(--line)}

.metric:last-child {border-right: 0}

.metric svg {width: 42px;
  height: 42px;
  color: var(--green)}

.metric b {font-size: 28px;
  font-weight: 500;
  display: block;
  line-height: 1}

.metric span {font-size: 14px;
  color: #b6bdbe;
  display: block;
  margin-top: 8px;
  line-height: 1.35}

.tasks>.container {padding-top: 30px;
  padding-bottom: 32px}

.task-grid {display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px}

.task-card,
.service-card,
.adv-grid article,
.process-grid article {border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(130deg,rgba(12,27,34,.9),rgba(5,13,17,.72))}

.task-card {padding: 22px 20px;
  min-height: 190px;
  position: relative}

.accordion-trigger {border: 0;
  background: none;
  width: 100%;
  padding: 0;
  text-align: left;
  color: inherit;
  display: flex;
  align-items: flex-start;
  gap: 16px}

.icon-box {width: 54px;
  height: 54px;
  border: 1px solid var(--line-soft);
  background: #101d22;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto}

.icon-box svg {width: 32px;
  height: 32px}

.card-title {font-size: 21px;
  line-height: 1.25;
  display: block;
  flex: 1;
  padding-top: 3px}

.card-title em {display: block;
  color: var(--green);
  font-size: 17px;
  font-style: normal;
  margin-bottom: 3px}

.task-card .chev {color: var(--green);
  align-self: flex-end;
  margin-top: 76px}

.accordion-panel p {color: #afb6b8;
  line-height: 1.65;
  margin: 10px 0 0 70px;
  max-width: 330px}

.tasks .accordion-panel {display: block}

.services {padding: 50px 0 28px}

.split-heading p {color: var(--muted);
  max-width: 370px;
  margin: -18px 0 26px}

.services-layout {display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px}

.service-featured {border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(125deg,#071218,#08161b);
  padding: 26px}

.service-featured>.accordion-trigger {max-width: 360px}

.service-featured-body {display: grid;
  grid-template-columns: .72fr 1.35fr;
  gap: 10px;
  align-items: end}

.service-copy>p {color: #b1b8ba;
  line-height: 1.55}

.check-list {list-style: none;
  padding: 0;
  margin: 22px 0}

.check-list li {position: relative;
  padding-left: 26px;
  margin: 7px 0;
  color: #c3c9ca}

.check-list li:before {content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700}

.device-frame {align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 355px;
  position: relative}

.device-frame:before {content: "";
  position: absolute;
  inset: 13% 4% 10%;
  border: 10px solid #1e2528;
  border-radius: 12px;
  box-shadow: 0 30px 30px #000}

.device-frame img {position: relative;
  width: 86%;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55)}

.service-small-grid {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px}

.service-card {padding: 24px 20px;
  min-height: 230px}

.service-card .accordion-trigger {gap: 18px}

.service-icon {color: var(--green);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  flex: 0 0 auto}

.service-icon svg {width: 50px;
  height: 50px}

.hex {border: 1px solid var(--green);
  clip-path: polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%)}

.round {border: 1px solid var(--green);
  border-radius: 50%}

.service-card .accordion-panel p {margin: 12px 0 24px 75px;
  max-width: 250px}

.service-card .text-link {margin-left: 75px}

.mobile-chevron {display: none}

.services-all {width: 250px;
  margin: 20px auto 0;
  display: flex}

.additional .container {padding-top: 34px}

.additional-grid {display: grid;
  grid-template-columns: repeat(6,1fr)}

.additional-grid article {padding: 8px 24px 10px;
  border-right: 1px solid var(--line);
  position: relative}

.additional-grid article:last-child {border-right: 0}

.additional-grid svg {color: var(--green);
  width: 46px;
  height: 46px}

.additional-grid h3 {font-size: 19px;
  line-height: 1.25;
  margin: 18px 0}

.additional-grid p {font-size: 14px;
  color: #9fa7a9;
  line-height: 1.6}

.additional-grid article>span {display: none;
  color: var(--green);
  position: absolute;
  right: 18px;
  bottom: 12px}

.integration-card {display: grid;
  grid-template-columns: 1.3fr .54fr .62fr .62fr .72fr;
  gap: 28px;
  align-items: center}

.integration-copy h2 {margin-bottom: 12px}

.integration-copy>p {color: var(--muted);
  max-width: 540px}

.external-systems {border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  margin-top: 22px}

.external-systems h3,
.flow h3 {font-size: 16px;
  margin-bottom: 14px}

.external-systems>div {display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px 20px;
  color: #c4cbcd}

.external-systems span {display: flex;
  align-items: center;
  gap: 8px}

.external-systems span svg {width: 18px;
  height: 18px;
  color: var(--green);
  flex: 0 0 auto}

.flow ul {margin: 0;
  padding: 0;
  list-style: none;
  color: #bdc4c5}

.flow li {margin: 7px 0;
  position: relative;
  padding-left: 16px}

.flow-in li:before {content: "←";
  color: var(--green);
  position: absolute;
  right: 0}

.flow-out li:before {content: "•";
  color: var(--cyan);
  position: absolute;
  left: 0}

.site-node {border: 1px solid #4a555a;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  background: #0a1115}

.site-node .dots {display: block;
  text-align: left;
  font-size: 12px;
  letter-spacing: 5px;
  color: #ed8c47}

.site-node b {display: block;
  font-size: 20px;
  line-height: 1.2;
  margin: 10px 0}

.site-screen {height: 108px;
  background: #e2e2e2;
  margin: 10px 0;
  border-radius: 4px;
  padding: 10px}

.site-screen:after {content: "";
  display: block;
  width: 55%;
  height: 10px;
  background: #bfc0c1;
  margin-top: 70px}

.integration-card>.button {min-width: 220px}

.projects>.container {padding-top: 38px}

.project-grid {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px}

.project-card {min-height: 330px;
  border: 1px solid #344047;
  border-radius: 12px;
  background: linear-gradient(120deg,#071218,#09171d);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr .92fr;
  gap: 20px;
  position: relative;
  overflow: hidden}

.project-card h3 {font-size: 25px;
  margin-bottom: 2px}

.project-type {color: #adb5b7;
  margin-bottom: 18px}

.project-role {color: var(--green);
  font-size: 18px}

.project-card img {align-self: center;
  border: 1px solid #3d4b50;
  border-radius: 9px}

.project-card .check-list {margin: 12px 0}

.project-card .check-list li {font-size: 14px;
  margin: 4px 0}

.tags {display: flex;
  gap: 8px;
  flex-wrap: wrap}

.tags span {border: 1px solid #3a474c;
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 12px}

.project-arrow {position: absolute;
  right: 18px;
  top: 18px;
  color: var(--green);
  width: 28px;
  height: 28px}

.slider-ui {display: none}

.projects-lower {display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 24px;
  margin-top: 48px}

.projects-lower h2 {font-size: 30px}

.other-grid {display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px}

.projects-lower>* {min-width: 0}

.other-card {border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: grid;
  grid-template-columns: 100px 1fr 20px;
  gap: 16px;
  align-items: center;
  min-height: 200px;
  background: #08151a;
  min-width: 0}

.other-card>* {min-width: 0}

.other-card img {width: 100px;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #4a555a}

.other-card h3 {font-size: 21px;
  margin-bottom: 10px}

.other-card p {font-size: 14px;
  color: #aeb5b6;
  line-height: 1.5;
  margin: 0}

.other-card svg {color: var(--green)}

.principles {border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: #08151a}

.principles h2 {font-size: 27px}

.principles ul {list-style: none;
  padding: 0;
  margin: 0}

.principles li {display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 19px 0;
  color: #d2d6d6}

.principles svg {color: var(--green);
  width: 34px;
  height: 34px;
  flex: 0 0 auto}

.adv-grid {display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px}

.adv-grid article {padding: 24px;
  min-height: 200px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px}

.big-icon {width: 70px;
  height: 70px;
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 22px}

.big-icon svg {width: 60px;
  height: 60px}

.adv-grid h3 {font-size: 21px;
  margin-bottom: 12px}

.adv-grid p {color: #a9b1b3;
  margin: 0;
  line-height: 1.55}

.process-grid {display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px}

.process-grid article {padding: 26px;
  min-height: 225px;
  position: relative}

.process-grid article:after {content: "╌╌→";
  position: absolute;
  right: 24px;
  top: 68px;
  color: var(--green);
  font-size: 29px;
  letter-spacing: -3px}

.process-grid b {display: block;
  color: var(--green);
  font-size: 52px;
  line-height: 1;
  margin-bottom: 14px;
  font-weight: 500}

.process-grid h3 {font-size: 22px;
  margin-bottom: 18px}

.process-grid article>div {display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px}

.process-grid svg {color: var(--green);
  width: 44px;
  height: 44px}

.process-grid p {color: #b0b7b9;
  margin: 0}

.ai-section {padding: 24px 0 34px}

.ai-card {border: 1px solid #6f821c;
  border-radius: 16px;
  background: radial-gradient(circle at 75% 50%,rgba(65,35,114,.18),transparent 34%),linear-gradient(120deg,#091616,#071014);
  min-height: 350px;
  padding: 34px 330px 32px 26px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 36px;
  align-items: center}

.ai-copy h2 {margin-bottom: 18px}

.ai-copy p {color: #b6bdbe;
  margin-bottom: 45px}

.ai-steps {display: flex;
  gap: 18px;
  align-items: flex-start;
  text-align: center}

.ai-steps>div {width: 118px}

.ai-steps>i {font-style: normal;
  color: var(--green);
  font-size: 32px;
  margin-top: 29px}

.ai-steps span {width: 76px;
  height: 76px;
  border: 1px solid var(--green);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 12px}

.ai-steps svg {width: 38px;
  height: 38px;
  color: var(--green)}

.ai-steps h3 {font-size: 17px;
  margin-bottom: 8px}

.ai-steps p {font-size: 12px;
  color: #a5adaf;
  line-height: 1.45;
  margin: 0}

.ai-art {position: absolute;
  right: -45px;
  bottom: -225px;
  width: 370px}

.contact-card {display: grid;
  grid-template-columns: .62fr 1fr;
  gap: 65px;
  padding: 16px 20px}

.contact-copy h2 {font-size: 38px}

.contact-copy>p {color: #b4bbbd;
  max-width: 430px;
  font-size: 17px;
  line-height: 1.7}

.contact-copy ul {list-style: none;
  padding: 0;
  margin: 30px 0 0}

.contact-copy li {display: flex;
  align-items: center;
  gap: 15px;
  margin: 16px 0;
  font-size: 22px}

.contact-copy li svg {color: var(--green)}

.slider-ui button:disabled {opacity: .35;
  cursor: not-allowed}

.slider-track:focus-visible {outline: 2px solid var(--green);
  outline-offset: 4px}

@media (max-width:1180px) {
.hero-grid {grid-template-columns: .9fr 1.1fr}

.hero-art {margin-left: -30px}

.metrics {grid-template-columns: repeat(5,1fr)}

.metric {gap: 13px;
    padding: 0 13px}

.metric svg {width: 34px}

.integration-card {grid-template-columns: 1.2fr .55fr .65fr .65fr}

.integration-card>.button {grid-column: 2/5;
    justify-self: center}

.ai-card {padding-right: 260px;
    grid-template-columns: 220px 1fr}

.ai-art {width: 320px;
    right: -70px}

.ai-steps {gap: 10px}

.ai-steps>div {width: 105px}

.projects-lower {grid-template-columns: minmax(0,1fr) 300px}
}

@media (max-width:1100px) {
.ai-card {padding: 28px;
    grid-template-columns: 1fr}

.ai-art {position: absolute;
    right: -50px;
    top: 10px;
    width: 240px;
    opacity: .55}

.ai-copy {padding-right: 180px}

.ai-steps {position: relative;
    z-index: 2}
}

@media (max-width:900px) {
.hero-grid {grid-template-columns: 1fr}

.hero-copy {max-width: 680px}

.hero-art {margin: 0 auto;
    width: 80%;
    order: -1;
    display: none}

.metrics {grid-template-columns: repeat(2,1fr);
    gap: 1px;
    padding: 0;
    background: transparent;
    border: 0}

.metric {border: 1px solid var(--line);
    border-radius: 10px;
    justify-content: flex-start;
    padding: 18px;
    min-height: 95px}

.metric:last-child {grid-column: 1/-1}

.task-grid {grid-template-columns: 1fr 1fr}

.services-layout {grid-template-columns: 1fr}

.additional-grid {grid-template-columns: repeat(3,1fr);
    row-gap: 20px}

.additional-grid article:nth-child(3) {border-right: 0}

.integration-card {grid-template-columns: 1fr 1fr;
    gap: 20px}

.integration-copy {grid-column: 1/-1}

.site-node {grid-row: 2/4;
    grid-column: 2}

.flow-in {grid-column: 1}

.flow-out {grid-column: 1}

.integration-card>.button {grid-column: 1/-1}

.project-card {grid-template-columns: 1fr}

.projects-lower {grid-template-columns: minmax(0,1fr)}

.other-grid {grid-template-columns: 1fr}

.adv-grid {grid-template-columns: 1fr 1fr}

.process-grid {grid-template-columns: 1fr 1fr}

.ai-card {padding: 28px;
    grid-template-columns: 1fr}

.ai-art {position: absolute;
    right: -50px;
    top: 10px;
    width: 240px;
    opacity: .55}

.ai-copy {padding-right: 180px}

.ai-steps {position: relative;
    z-index: 2}

.contact-card {grid-template-columns: 1fr}
}

@media (max-width:767px) {
.section-shell {padding: 8px 0}

.section-shell>.container,
.additional .container,
.integrations .container {padding: 20px 14px;
    border-radius: 10px}

.hero {padding: 14px 0 18px}

.hero-grid {min-height: 0;
    display: block;
    position: relative}

.hero-copy {display: grid;
    grid-template-columns: minmax(0,1fr) 42%;
    column-gap: 8px;
    position: relative;
    z-index: 2;
    padding-left: 0}

.eyebrow {grid-column: 1;
    justify-self: start;
    font-size: 12px;
    line-height: 1.25;
    padding: 6px 9px;
    margin: 0 0 10px;
    border-radius: 5px;
    gap: 6px}

.eyebrow svg {width: 14px;
    height: 14px}

.hero h1 {grid-column: 1;
    font-size: clamp(29px,8.7vw,34px);
    line-height: 1.03;
    margin-bottom: 12px;
    align-self: end}

.hero-copy>p {grid-column: 1/-1;
    font-size: 14px;
    line-height: 1.55;
    margin: 8px 0 16px;
    max-width: none;
    color: #c1c6c7}

.hero-actions {grid-column: 1/-1;
    gap: 8px;
    flex-wrap: wrap}

.hero-actions .button {font-size: 14px;
    min-height: 44px;
    padding: 0 14px}

.hero-art {display: block;
    width: 58%;
    margin: 0;
    position: absolute;
    right: -7%;
    top: 42px;
    z-index: 0;
    pointer-events: none}

.hero-copy:after {content: "";
    grid-column: 2;
    grid-row: 1/3;
    min-height: 220px}

.metrics {margin-top: 14px;
    gap: 6px;
    grid-template-columns: repeat(2,1fr)}

.metric {min-height: 88px;
    padding: 13px;
    border-radius: 7px;
    gap: 10px}

.metric svg {width: 28px;
    height: 28px}

.metric b {font-size: 21px}

.metric span {font-size: 12px;
    line-height: 1.35;
    margin-top: 5px}

.metric:last-child {min-height: 88px}

.tasks>.container {padding-top: 18px}

.task-grid {display: block}

.task-card {min-height: 0;
    padding: 12px;
    margin-bottom: 7px;
    border-radius: 7px}

.task-card .accordion-trigger {align-items: center;
    gap: 10px}

.icon-box {width: 36px;
    height: 36px;
    border-radius: 6px}

.icon-box svg {width: 22px;
    height: 22px}

.card-title {font-size: 14px;
    line-height: 1.3;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 9px}

.card-title em {font-size: 12px;
    margin: 0;
    min-width: 20px}

.task-card .chev {width: 17px;
    height: 17px;
    margin: 0 0 0 auto;
    align-self: center}

.task-card:not(.is-open) .chev {transform: rotate(45deg)}

.accordion-mobile .accordion-panel {display: none}

.accordion-mobile .accordion-item.is-open>.accordion-panel {display: block}

.accordion-panel p {font-size: 13px;
    line-height: 1.5;
    margin: 10px 0 2px 55px}

.services {padding: 18px 0 8px}

.split-heading p {font-size: 13px;
    line-height: 1.5;
    margin: -8px 0 14px;
    max-width: none}

.services-layout {display: block}

.service-featured,
.service-card {padding: 12px;
    min-height: 0;
    margin-bottom: 7px;
    border-radius: 7px}

.service-featured>.accordion-trigger {max-width: none;
    align-items: center}

.service-featured-body {display: block}

.service-featured .service-copy>p,
.service-card .accordion-panel p {font-size: 13px;
    line-height: 1.5;
    margin: 10px 0 7px 55px}

.service-featured .check-list,
.device-frame {display: none}

.service-featured .text-link,
.service-card .text-link {font-size: 13px;
    margin: 8px 0 0 55px}

.service-small-grid {display: block}

.service-icon {width: 36px;
    height: 36px}

.service-icon svg {width: 30px;
    height: 30px}

.service-card .accordion-trigger {align-items: center;
    gap: 10px}

.mobile-chevron {display: block;
    margin-left: auto;
    color: #9aa1a3;
    transition: transform var(--transition)}

.mobile-chevron svg {width: 18px;
    height: 18px}

.accordion-item.is-open .mobile-chevron {transform: rotate(180deg)}

.services-all {width: 100%;
    margin-top: 8px;
    min-height: 44px}

.additional-grid {grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px}

.additional-grid article {border: 1px solid var(--line);
    border-radius: 7px;
    padding: 13px;
    min-height: 160px}

.additional-grid article:nth-child(n) {border-right: 1px solid var(--line)}

.additional-grid svg {width: 28px;
    height: 28px}

.additional-grid h3 {font-size: 14px;
    line-height: 1.3;
    margin: 10px 0 8px}

.additional-grid p {font-size: 13px;
    line-height: 1.45;
    margin-bottom: 22px}

.additional-grid article>span {display: block;
    font-size: 18px}

.integration-card {display: grid;
    grid-template-columns: 1fr;
    gap: 12px}

.integration-copy {grid-column: 1}

.integration-copy h2 {margin-bottom: 8px}

.integration-copy>p {display: block;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px}

.external-systems {padding: 12px;
    margin: 0;
    border-radius: 7px;
    grid-column: 1}

.external-systems h3,
.flow h3 {font-size: 14px;
    margin-bottom: 9px}

.external-systems>div {grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px 10px;
    font-size: 12px}

.external-systems span {gap: 6px;
    line-height: 1.3}

.external-systems span svg {width: 16px;
    height: 16px}

.flow {font-size: 13px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 7px}

.flow h3 {font-size: 14px}

.flow li {margin: 5px 0;
    padding-left: 15px}

.flow-in,
.site-node,
.flow-out {grid-column: 1;
    grid-row: auto}

.site-node {padding: 12px;
    border-radius: 7px}

.site-node b {font-size: 16px}

.site-screen {height: 82px}

.site-screen:after {margin-top: 50px;
    height: 7px}

.integration-card>.button {grid-column: 1;
    min-width: 0;
    width: 100%;
    min-height: 44px;
    font-size: 14px}

.projects>.container {padding-top: 20px;
    overflow: hidden}

.project-slider {overflow: visible}

.project-grid {display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 3px 1px 8px;
    scroll-padding-inline: 1px}

.project-grid::-webkit-scrollbar {display: none}

.project-card {flex: 0 0 86%;
    scroll-snap-align: start;
    min-height: 0;
    padding: 14px;
    grid-template-columns: 1fr;
    border-radius: 7px;
    gap: 12px}

.project-card h3 {font-size: 19px}

.project-type {font-size: 12px;
    line-height: 1.4;
    margin-bottom: 9px}

.project-role {font-size: 13px;
    line-height: 1.4}

.project-card .check-list {margin: 10px 0}

.project-card .check-list li {font-size: 12px;
    line-height: 1.4;
    padding-left: 18px}

.project-card img {order: 2}

.project-card .tags {display: none}

.project-arrow {width: 20px;
    height: 20px;
    right: 11px;
    top: 11px}

.slider-ui {display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 10px 0 2px}

.slider-ui button {width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--green);
    border-radius: 6px}

.slider-ui button svg {width: 22px;
    height: 22px}

.slider-ui span {font-size: 12px}

.projects-lower {display: block;
    margin-top: 22px}

.projects-lower h2 {font-size: 24px}

.other-grid {display: block}

.other-card {min-height: 102px;
    padding: 10px;
    margin-bottom: 7px;
    grid-template-columns: 72px 1fr 20px;
    gap: 10px;
    border-radius: 7px}

.other-card img {width: 72px;
    height: 82px;
    border-radius: 5px}

.other-card h3 {font-size: 15px;
    margin: 0 0 5px}

.other-card p {font-size: 13px;
    line-height: 1.4}

.other-card svg {width: 17px}

.principles {padding: 14px;
    border-radius: 7px;
    margin-top: 14px}

.principles h2 {font-size: 22px}

.principles li {font-size: 13px;
    line-height: 1.4;
    margin: 10px 0;
    gap: 10px}

.principles svg {width: 24px;
    height: 24px}

.adv-grid {display: block}

.adv-grid article {min-height: 0;
    padding: 12px;
    margin-bottom: 7px;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    border-radius: 7px}

.big-icon {width: 42px;
    height: 42px;
    font-size: 13px}

.big-icon svg {width: 34px;
    height: 34px}

.adv-grid h3 {font-size: 15px;
    line-height: 1.3;
    margin-bottom: 5px}

.adv-grid p {font-size: 13px;
    line-height: 1.45}

.process-grid {display: block;
    position: relative}

.process-grid:before {content: "";
    position: absolute;
    left: 31px;
    top: 32px;
    bottom: 32px;
    border-left: 1px dotted var(--green)}

.process-grid article {min-height: 116px;
    padding: 14px 10px 14px 58px;
    margin-bottom: 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 8px}

.process-grid article:after {display: none}

.process-grid b {font-size: 24px;
    position: absolute;
    left: 6px;
    background: var(--bg-2);
    z-index: 2;
    padding: 2px}

.process-grid h3 {font-size: 15px;
    margin: 0 0 8px;
    grid-column: 2}

.process-grid article>div {grid-column: 2;
    grid-template-columns: 28px 1fr;
    gap: 9px}

.process-grid svg {width: 25px;
    height: 25px}

.process-grid p {font-size: 13px;
    line-height: 1.45}

.ai-section {padding: 8px 0}

.ai-card {padding: 18px 14px 20px;
    min-height: 0;
    display: block;
    border-radius: 8px}

.ai-copy {padding-right: 105px;
    min-height: 140px}

.ai-copy h2 {font-size: 24px}

.ai-copy p {font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px}

.ai-copy .button {font-size: 13px;
    min-height: 42px}

.ai-art {width: 150px;
    right: -20px;
    top: -28px;
    opacity: .9}

.ai-steps {margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left}

.ai-steps>div {width: auto;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 10px 0}

.ai-steps>i {font-size: 20px;
    margin: 0 0 0 14px;
    transform: rotate(90deg);
    justify-self: start;
    line-height: 1}

.ai-steps span {width: 48px;
    height: 48px;
    margin: 0;
    grid-row: 1/3}

.ai-steps svg {width: 25px;
    height: 25px}

.ai-steps h3 {font-size: 14px;
    margin: 0 0 3px}

.ai-steps p {font-size: 12px;
    line-height: 1.4;
    margin: 0}

.contact-card {display: block;
    padding: 4px}

.contact-copy h2 {font-size: 24px}

.contact-copy>p {font-size: 14px;
    line-height: 1.55}

.contact-copy ul {margin: 14px 0 18px}

.contact-copy li {font-size: 14px;
    margin: 8px 0;
    gap: 9px}

.contact-copy li svg {width: 18px;
    height: 18px}

.footer-accordion-item.is-open .footer-accordion-trigger svg {transform: rotate(180deg)}

.footer-accordion-item.is-open .footer-accordion-panel {display: block}
}

@media (max-width:390px) {
.hero-copy {grid-template-columns: minmax(0,1fr) 40%}

.hero h1 {font-size: 29px}

.hero-art {width: 60%;
    right: -9%;
    top: 46px}

.hero-copy:after {min-height: 218px}

.project-card {flex-basis: 88%}
}

@media (min-width: 1181px) {
.hero {padding: 34px 0 0;}

.hero-grid {min-height: 594px;
    grid-template-columns: .82fr 1.25fr;}

.eyebrow {padding: 7px 13px;
    margin-bottom: 25px;
    font-size: 14px;}

.hero h1 {font-size: 56px;
    line-height: 1.08;
    margin-bottom: 24px;
    letter-spacing: -.035em;}

.hero-copy > p {max-width: 480px;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.6;}

.hero-art {margin-left: -92px;
    margin-right: -54px;
    transform: scale(1.04);
    transform-origin: center center;}

.hero-actions .button {min-height: 58px;}

.metrics {min-height: 148px;
    padding: 23px 0;}

.metric b {font-size: 30px;}

.tasks {padding: 10px 0 14px;}

.tasks > .container {padding: 28px 36px 30px;}

.task-grid {gap: 14px 16px;}

.task-card {min-height: 182px;
    padding: 18px 16px;}

.task-card .icon-box {width: 50px;
    height: 50px;}

.task-card .icon-box svg {width: 28px;
    height: 28px;}

.task-card .card-title {font-size: 19px;
    line-height: 1.25;}

.task-card .card-title em {font-size: 15px;}

.task-card .accordion-panel p {max-width: 320px;
    margin: 8px 0 0 66px;
    font-size: 14px;
    line-height: 1.5;}

.task-card .chev {width: 22px;
    height: 22px;
    margin-top: 66px;}

.services {padding: 38px 0 24px;}

.split-heading p {max-width: 390px;
    margin: -12px 0 22px;
    font-size: 15px;
    line-height: 1.45;}

.services-layout {grid-template-columns: 1.08fr 1fr;
    gap: 20px;}

.service-featured {padding: 20px;}

.service-featured > .accordion-trigger {max-width: 330px;}

.service-featured-body {grid-template-columns: .76fr 1.35fr;
    gap: 12px;}

.service-featured .card-title,
.service-card .card-title {font-size: 18px;}

.service-featured .card-title em,
.service-card .card-title em {font-size: 14px;}

.service-copy > p,
.service-card .accordion-panel p,
.service-featured .check-list li {font-size: 14px;
    line-height: 1.45;}

.check-list {margin: 16px 0;}

.check-list li {margin: 5px 0;}

.device-frame {min-height: 300px;}

.device-frame img {width: 90%;}

.service-small-grid {gap: 14px;}

.service-card {min-height: 0;
    padding: 18px 16px;}

.service-card .accordion-trigger {gap: 12px;}

.service-icon {width: 48px;
    height: 48px;}

.service-icon svg {width: 42px;
    height: 42px;}

.service-card .accordion-panel p {max-width: 230px;
    margin: 10px 0 16px 60px;}

.service-card .text-link {margin-left: 60px;
    font-size: 14px;}

.services-all {width: 255px;
    min-height: 48px;
    margin-top: 16px;}

.additional {padding: 0 0 22px;}

.additional > .container {padding: 28px 22px 24px;}

.additional-grid article {padding: 4px 24px 4px;}

.additional-grid svg {width: 40px;
    height: 40px;}

.additional-grid h3 {margin: 14px 0 12px;
    font-size: 17px;}

.additional-grid p {margin-bottom: 0;
    font-size: 13px;
    line-height: 1.5;}

.integrations {padding: 0 0 24px;}

.integrations > .container {padding: 28px 24px 24px;}

.integration-card {grid-template-columns: 1.32fr .56fr .64fr .64fr .72fr;
    gap: 22px;}

.integration-copy > p {margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.5;}

.external-systems {padding: 14px;
    margin-top: 14px;}

.external-systems h3,
.flow h3 {margin-bottom: 10px;
    font-size: 15px;}

.external-systems > div,
.flow {font-size: 13px;}

.flow li {margin: 5px 0;}

.site-node {padding: 14px;}

.site-node b {margin: 6px 0;
    font-size: 18px;}

.site-screen {height: 96px;
    margin: 7px 0;}

.site-screen::after {margin-top: 60px;}

.integration-card > .button {min-width: 205px;
    min-height: 48px;
    padding-inline: 18px;
    font-size: 14px;}

.projects {padding: 12px 0 14px;}

.projects > .container {padding: 28px 28px 30px;}

.project-grid {gap: 16px;}

.project-card {min-height: 0;
    padding: 20px;
    grid-template-columns: 1fr .94fr;
    gap: 18px;}

.project-card h3 {font-size: 22px;}

.project-type {margin-bottom: 12px;
    font-size: 14px;}

.project-role {font-size: 16px;
    line-height: 1.45;}

.project-card .check-list {margin: 10px 0;}

.project-card .check-list li {margin: 3px 0;
    font-size: 13px;
    line-height: 1.4;}

.tags span {padding: 1px 8px;
    font-size: 12px;}

.project-arrow {width: 24px;
    height: 24px;}

.projects-lower {grid-template-columns: minmax(0,1fr) 370px;
    gap: 18px;
    margin-top: 30px;}

.projects-lower h2 {font-size: 28px;
    margin-bottom: 14px;}

.other-grid {gap: 12px;}

.other-card {grid-template-columns: 86px 1fr 18px;
    min-height: 176px;
    padding: 14px;
    gap: 12px;}

.other-card img {width: 86px;
    height: 128px;}

.other-card h3 {margin-bottom: 7px;
    font-size: 18px;}

.other-card p {font-size: 13px;
    line-height: 1.45;}

.principles {padding: 18px;}

.principles h2 {font-size: 25px;
    margin-bottom: 14px;}

.principles li {gap: 12px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.35;}

.principles svg {width: 28px;
    height: 28px;}

.advantages {padding: 12px 0 14px;}

.advantages > .container {padding: 28px 28px 30px;}

.adv-grid {gap: 14px;}

.adv-grid article {min-height: 176px;
    padding: 20px;
    grid-template-columns: 68px 1fr;
    gap: 14px;}

.big-icon {width: 62px;
    height: 62px;}

.big-icon svg {width: 54px;
    height: 54px;}

.adv-grid h3 {margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.3;}

.adv-grid p {font-size: 14px;
    line-height: 1.5;}

.process {padding: 8px 0 14px;}

.process > .container {padding: 28px 28px 30px;}

.process-grid {gap: 14px 18px;}

.process-grid article {min-height: 215px;
    padding: 24px;}

.process-grid b {margin-bottom: 12px;
    font-size: 50px;}

.process-grid h3 {margin-bottom: 14px;
    font-size: 20px;}

.process-grid p {font-size: 14px;
    line-height: 1.45;}

.ai-section {padding: 14px 0 24px;}

.ai-card {min-height: 352px;
    padding: 28px 330px 28px 24px;
    grid-template-columns: 240px 1fr;
    gap: 28px;}

.ai-copy p {margin-bottom: 32px;
    font-size: 14px;
    line-height: 1.5;}

.ai-steps {gap: 14px;}

.ai-steps > div {width: 112px;}

.ai-steps span {width: 72px;
    height: 72px;}

.ai-steps h3 {font-size: 16px;}

.ai-steps p {font-size: 12px;}

.ai-art {right: -34px;
    bottom: -220px;
    width: 365px;}

.contact {padding: 18px 0 20px;}

.contact > .container {padding: 28px 28px 30px;}

.contact-card {grid-template-columns: .62fr 1fr;
    gap: 58px;
    padding: 4px 6px;}

.contact-copy h2 {font-size: 34px;}

.contact-copy > p {font-size: 16px;
    line-height: 1.6;}

.contact-copy ul {margin-top: 24px;}

.contact-copy li {margin: 13px 0;
    font-size: 20px;}
}

@media (min-width: 1181px) {
.hero-grid {height: 594px;
    min-height: 0;
    align-items: start;}

.hero-copy {padding-top: 8px;}

.hero-art {transform: translateY(-60px) scale(1.04);
    transform-origin: center center;}

.services {padding-top: 20px;
    padding-bottom: 18px;}

.services-all {margin-top: 12px;}

.additional > .container {padding-top: 34px;
    padding-bottom: 32px;}

.additional-grid article {padding-top: 8px;
    padding-bottom: 8px;}

.integrations > .container {padding: 20px 24px;}

.integration-card {height: 327px;
    min-height: 0;
    align-items: center;}

.integration-copy > p {margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.4;}

.external-systems {margin-top: 10px;
    padding: 10px;}

.external-systems h3,
.flow h3 {margin-bottom: 7px;}

.external-systems > div {gap: 6px;}

.flow li {margin: 4px 0;}

.site-node {padding: 12px;}

.site-screen {height: 82px;
    margin: 5px 0;}

.site-screen::after {margin-top: 48px;}

.projects > .container {padding-top: 42px;}

.project-card {min-height: 342px;}

.projects-lower {margin-top: 46px;}

.projects-lower h2 {margin-bottom: 24px;}

.adv-grid {row-gap: 27px;
    column-gap: 14px;}

.adv-grid article {min-height: 190px;}

.process {padding-top: 17px;}

.process > .container {padding-top: 45px;}

.process-grid {row-gap: 20px;}

.process-grid article {min-height: 239px;}

.ai-section {padding-bottom: 34px;}

.contact {padding-top: 57px;
    padding-bottom: 38px;}

.contact > .container {padding-top: 38px;
    padding-bottom: 49px;}
}

@media (min-width: 1181px) {
.advantages {padding-top: 3px;}
}

@media (min-width: 1181px) {
.flow-in li::after,
.flow-out li::after {content: "";
    position: absolute;
    top: 50%;
    width: 44px;
    border-top: 2px dotted currentColor;
    opacity: .78;
    transform: translateY(-50%);
    pointer-events: none;}

.flow-in li {color: #bdc4c5;}

.flow-in li::before,
.flow-in li::after {color: var(--green);}

.flow-in li::after {right: -48px;}

.flow-out li::before,
.flow-out li::after {color: var(--cyan);}

.flow-out li::after {left: -48px;}
}

@media (min-width: 1181px) {
.project-grid {row-gap: 21px;}

.projects-lower {margin-top: 41px;}

.adv-grid {row-gap: 13px;}

.adv-grid article:nth-child(-n + 3) {min-height: 202px;}

.advantages > .container {padding-bottom: 32px;}
}

@media (max-width: 767px) {
.section-shell {padding: 6px 0;}

.section-shell > .container,
.additional .container,
.integrations .container {padding: 16px 10px;}

.hero {padding: 12px 0 14px;}

.hero-copy {grid-template-columns: minmax(0, 61%) 39%;
    column-gap: 6px;}

.eyebrow {font-size: 12px;
    padding: 5px 8px;
    margin-bottom: 8px;}

.hero h1 {font-size: 25px;
    line-height: 1.04;
    margin-bottom: 9px;
    letter-spacing: -.035em;}

.hero-copy > p {grid-column: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.48;}

.hero-copy::after {grid-column: 2;
    grid-row: 1 / 4;
    min-height: 206px;}

.hero-art {width: 53%;
    right: -3%;
    top: 36px;}

.hero-actions {margin-top: 12px;
    gap: 8px;}

.hero-actions .button {flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
    font-size: 13px;}

.metrics {margin-top: 12px;
    gap: 6px;}

.metric {min-height: 72px;
    padding: 9px 10px;
    gap: 9px;}

.metric:last-child {min-height: 68px;}

.metric svg {width: 24px;
    height: 24px;}

.metric b {font-size: 20px;}

.metric span {margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;}

.tasks > .container {padding: 14px 10px 12px;}

.task-card,
.service-featured,
.service-card {padding: 7px 9px;
    margin-bottom: 6px;}

.task-card .accordion-trigger,
.service-featured > .accordion-trigger,
.service-card .accordion-trigger {min-height: 44px;}

.icon-box,
.service-icon {width: 34px;
    height: 34px;}

.icon-box svg {width: 20px;
    height: 20px;}

.service-icon svg {width: 28px;
    height: 28px;}

.card-title {font-size: 14px;
    gap: 7px;}

.accordion-panel p {margin: 5px 0 5px 51px;
    font-size: 13px;
    line-height: 1.45;}

.services {padding: 14px 0 6px;}

.split-heading p {margin: -5px 0 11px;
    font-size: 13px;
    line-height: 1.45;}

.service-featured .service-copy > p,
.service-card .accordion-panel p {margin: 5px 0 5px 51px;
    font-size: 13px;}

.service-featured .text-link,
.service-card .text-link {margin: 5px 0 3px 51px;
    font-size: 13px;}

.services-all {margin-top: 5px;}

.additional-grid {gap: 7px;}

.additional-grid article {min-height: 108px;
    padding: 11px;}

.additional-grid svg {width: 26px;
    height: 26px;}

.additional-grid h3 {margin: 9px 0 0;
    font-size: 14px;
    line-height: 1.3;}

.additional-grid p {display: none;}

.additional-grid article > span {right: 11px;
    bottom: 8px;}

.integration-card {grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;}

.integration-copy {grid-column: 1 / -1;}

.integration-copy > p {margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;}

.external-systems {grid-column: 1 / -1;
    padding: 9px;}

.external-systems h3,
.flow h3 {margin-bottom: 7px;
    font-size: 13px;}

.external-systems > div {grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    font-size: 12px;}

.external-systems span {min-height: 24px;}

.flow-in,
.site-node,
.flow-out {grid-row: auto;}

.flow-in {grid-column: 1;
    position: relative;}

.site-node {grid-column: 2;}

.flow-out {grid-column: 3;
    position: relative;}

.flow {padding: 8px;
    font-size: 12px;}

.flow li {margin: 4px 0;
    padding-left: 10px;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;}

.flow-in li {padding-left: 0;
    padding-right: 9px;}

.flow-in::after,
.flow-out::before {content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    border-top: 1px dotted currentColor;
    transform: translateY(-50%);
    pointer-events: none;}

.flow-in::after {right: -9px;
    color: var(--green);}

.flow-out::before {left: -9px;
    color: var(--cyan);}

.site-node {padding: 8px 6px;}

.site-node .dots {font-size: 9px;
    letter-spacing: 3px;}

.site-node b {margin: 5px 0;
    font-size: 13px;
    line-height: 1.25;}

.site-screen {height: 64px;
    padding: 6px;}

.site-screen::after {height: 6px;
    margin-top: 39px;}

.integration-card > .button {grid-column: 1 / -1;
    margin-top: 1px;}

.projects > .container {padding-top: 16px;}

.project-grid {gap: 8px;}

.project-card {flex-basis: 91%;
    min-height: 286px;
    padding: 10px;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 8px;
    align-items: start;}

.project-text {min-width: 0;}

.project-card h3 {padding-right: 18px;
    font-size: 16px;
    line-height: 1.2;}

.project-type,
.project-role {font-size: 12px;
    line-height: 1.35;}

.project-type {margin-bottom: 7px;}

.project-card .check-list {margin: 7px 0;}

.project-card .check-list li {margin: 3px 0;
    padding-left: 15px;
    font-size: 12px;
    line-height: 1.3;}

.project-card .tags {display: flex;
    gap: 4px;}

.tags span {padding: 2px 5px;
    font-size: 12px;
    line-height: 1.2;}

.project-card img {order: initial;
    width: 100%;
    height: 178px;
    object-fit: cover;
    align-self: center;
    margin-top: 44px;}

.slider-ui {padding-top: 5px;}

.slider-ui button {width: 44px;
    height: 44px;}

.projects-lower {margin-top: 16px;}

.projects-lower h2 {font-size: 20px;
    margin-bottom: 10px;}

.other-card {min-height: 72px;
    padding: 7px;
    grid-template-columns: 56px 1fr 18px;
    gap: 8px;}

.other-card img {width: 56px;
    height: 56px;}

.other-card h3 {font-size: 14px;}

.other-card p {font-size: 12px;
    line-height: 1.3;}

.principles {display: none;}

.adv-grid article {min-height: 0;
    padding: 9px;
    margin-bottom: 6px;
    grid-template-columns: 36px 1fr;
    gap: 9px;}

.big-icon {width: 36px;
    height: 36px;
    font-size: 12px;}

.big-icon svg {width: 29px;
    height: 29px;}

.adv-grid h3 {margin-bottom: 3px;
    font-size: 14px;
    line-height: 1.25;}

.adv-grid h3 br {display: none;}

.adv-grid p {font-size: 12px;
    line-height: 1.35;}

.process-grid::before {left: 28px;
    top: 24px;
    bottom: 24px;}

.process-grid article {min-height: 94px;
    margin-bottom: 6px;
    padding: 10px 9px 10px 50px;
    grid-template-columns: 30px 1fr;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: linear-gradient(130deg, rgba(12,27,34,.9), rgba(5,13,17,.72));}

.process-grid b {left: 4px;
    font-size: 22px;
    background: var(--panel);}

.process-grid h3 {margin-bottom: 4px;
    font-size: 14px;}

.process-grid article > div {grid-template-columns: 23px 1fr;
    gap: 7px;}

.process-grid svg {width: 22px;
    height: 22px;}

.process-grid p {font-size: 12px;
    line-height: 1.35;}

.ai-card {padding: 15px 12px 16px;}

.ai-copy {min-height: 124px;
    padding-right: 102px;}

.ai-copy h2 {font-size: 21px;}

.ai-copy p {margin-bottom: 9px;
    font-size: 13px;
    line-height: 1.45;}

.ai-art {width: 138px;
    right: -14px;
    top: -19px;}

.ai-steps {margin-top: 10px;
    gap: 2px;}

.ai-steps > div {grid-template-columns: 42px 1fr;
    column-gap: 10px;
    padding: 6px 0;}

.ai-steps > i {margin-left: 11px;
    font-size: 17px;}

.ai-steps span {width: 42px;
    height: 42px;}

.ai-steps svg {width: 22px;
    height: 22px;}

.ai-steps h3 {font-size: 14px;}

.ai-steps p {font-size: 12px;
    line-height: 1.3;}

.contact-card {padding: 0;}

.contact-copy h2 {font-size: 21px;}

.contact-copy > p {font-size: 13px;
    line-height: 1.45;}

.contact-copy ul {margin: 10px 0 14px;}

.contact-copy li {margin: 6px 0;
    font-size: 13px;}
}

@media (max-width: 390px) {
.hero-copy {grid-template-columns: minmax(0, 62%) 38%;}

.hero h1 {font-size: 24px;}

.hero-art {width: 52%;
    right: -3%;
    top: 39px;}

.project-card {flex-basis: 92%;}
}

@media (max-width: 767px) {
.hero-copy {grid-template-columns: minmax(0, 65%) 35%;}

.hero h1 {font-size: 23px;
    line-height: 1.06;}

.hero-copy::after {min-height: 190px;}

.hero-art {width: 49%;
    right: -2%;
    top: 38px;}

.additional-grid h3 {padding-right: 20px;}

.site-node .dots {font-size: 12px;
    letter-spacing: 2px;}
}

@media (max-width: 390px) {
.hero-copy {grid-template-columns: minmax(0, 65%) 35%;}

.hero h1 {font-size: 23px;}

.hero-art {width: 49%;
    right: -2%;
    top: 38px;}
}

@media (max-width: 767px) {
.hero-actions .button {min-height: 44px;}
}

.responsive-project-image,
.responsive-other-image {display: block;
  min-width: 0;
  overflow: hidden;}

.device-frame .responsive-project-image {display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;}

.responsive-project-image img,
.responsive-other-image img,
.ai-art img {display: block;}

.ai-art img {width: 100%;
  height: auto;}

.hero-actions .button {min-height: 52px;
  padding-inline: 22px;
  gap: 10px;
  border-radius: 8px;
  white-space: nowrap;}

.hero-actions .button svg {width: 18px;
  height: 18px;
  flex: 0 0 auto;}

.hero-actions .button-ghost {border-color: #3b4a51;
  background: linear-gradient(180deg, rgba(14, 28, 34, .78), rgba(5, 14, 18, .72));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);}

.hero-actions .button:active {transform: translateY(0) scale(.99);}

@media (min-width: 768px) {
.task-card .chev {position: absolute;
    right: 18px;
    bottom: 18px;
    width: 22px;
    height: 22px;
    margin: 0;
    align-self: auto;}

.task-card .accordion-trigger {padding-right: 28px;}
}

@media (min-width: 1181px) {
.service-featured-body {grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 22px;
    align-items: stretch;}

.service-copy {max-width: 310px;
    padding-top: 10px;}

.service-copy > p {max-width: 300px;}

.device-frame {min-width: 0;}

.device-frame img {width: 86%;}
}

@media (min-width: 901px) and (max-width: 1180px) {
.service-featured-body {grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 14px;}

.service-copy > p,
.service-featured .check-list li {overflow-wrap: normal;
    word-break: normal;}

.device-frame {min-height: 260px;
    min-width: 0;}
}

.site-node {border-color: #455158;
  background: linear-gradient(155deg, #0b1419, #050c10 72%);
  box-shadow: 0 16px 34px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.018);
  overflow: hidden;}

.site-node-chrome {display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  margin: -3px 0 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #263238;}

.site-node-chrome span {width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #738087;}

.site-node-chrome span:nth-child(1) {background: #ef6a5d;}

.site-node-chrome span:nth-child(2) {background: #d8ab45;}

.site-node-chrome span:nth-child(3) {background: #69c66a;}

.site-node b {position: relative;
  z-index: 1;}

.site-screen {height: 108px;
  margin: 9px 0 0;
  padding: 7px;
  border: 1px solid #3b464b;
  border-radius: 6px;
  background: #111a1f;}

.site-screen-preview {position: relative;
  height: 63px;
  overflow: hidden;
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(105,228,41,.08), transparent 44%),
    linear-gradient(180deg, #293238, #20292e);}

.site-screen-preview::before,
.site-screen-preview::after,
.site-screen-mark {content: "";
  position: absolute;
  display: block;
  border-radius: 2px;
  background: #68747a;}

.site-screen-preview::before {left: 9px;
  top: 10px;
  width: 35%;
  height: 5px;
  opacity: .55;}

.site-screen-preview::after {left: 9px;
  top: 21px;
  width: 54%;
  height: 4px;
  opacity: .3;}

.site-screen-mark {left: 50%;
  bottom: 7px;
  width: 34px;
  height: 22px;
  transform: translateX(-50%) rotate(45deg);
  opacity: .28;}

.site-screen-controls {display: grid;
  grid-template-columns: 1fr 24px 24px;
  gap: 5px;
  margin-top: 6px;}

.site-screen-controls span,
.site-screen-controls i {display: block;
  height: 18px;
  border-radius: 3px;
  background: #273238;}

.site-screen-controls span {position: relative;}

.site-screen-controls span::after {content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 58%;
  height: 4px;
  border-radius: 2px;
  background: #66737a;
  opacity: .55;}

.flow li {overflow: visible;}

.flow-in li::before,
.flow-out li::before {font-weight: 700;
  line-height: 1;
  opacity: 1;}

.flow-in li::before {content: "←";
  right: -2px;}

.flow-out li::before {content: "→";
  left: -2px;}

@media (min-width: 1181px) {
.integration-card {grid-template-columns: 1.3fr .56fr .72fr .64fr .72fr;
    gap: 20px;}

.flow-in li::after,
.flow-out li::after {border-top-width: 1px;
    opacity: .48;}

.flow-in li::after {right: -46px;}

.flow-out li::after {left: -46px;}

.flow-in li::before,
.flow-out li::before {font-size: 16px;}

.site-node {padding: 13px;}

.site-node b {margin: 4px 0 7px;
    font-size: 18px;}

.site-screen {height: 103px;}
}

.project-arrow {width: 38px;
  height: 38px;
  padding: 8px;
  color: #83f047;
  border: 1px solid rgba(105,228,41,.72);
  border-radius: 50%;
  background: rgba(2, 9, 13, .86);
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);}

.project-card:hover .project-arrow,
.project-card:focus-visible .project-arrow {color: #071006;
  background: var(--green);
  border-color: var(--green);}

@media (min-width: 768px) {
.process-grid article::before {content: "";
    position: absolute;
    right: 48px;
    top: 78px;
    width: 28px;
    border-top: 1px dashed rgba(105,228,41,.38);
    pointer-events: none;}

.process-grid article::after {content: "→";
    right: 21px;
    top: 61px;
    color: var(--green);
    font-size: 27px;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 0 12px rgba(105,228,41,.12);}
}

@media (min-width: 1181px) {
.ai-card {min-height: 352px;
    padding: 28px 24px;
    grid-template-columns: 225px minmax(0, 1fr) 250px;
    gap: 24px;
    align-items: center;}

.ai-copy {min-width: 0;}

.ai-steps {min-width: 0;
    gap: 11px;}

.ai-steps > div {width: 104px;}

.ai-steps > i {flex: 0 0 auto;
    margin-top: 27px;}

.ai-art {position: static;
    width: 250px;
    height: 296px;
    align-self: end;
    justify-self: end;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    opacity: 1;}

.ai-art img {width: 100%;
    height: auto;
    object-fit: contain;
    transform: translateY(52px) scale(1.04);
    transform-origin: center bottom;}
}

@media (min-width: 768px) and (max-width: 1180px) {
.ai-card {padding: 28px;
    grid-template-columns: 1fr;}

.ai-copy {padding-right: 0;}

.ai-art {position: static;
    width: 220px;
    justify-self: end;
    margin-top: 4px;
    opacity: 1;}
}

@media (max-width: 767px) {
.hero-actions {flex-wrap: nowrap;}

.hero-actions .button {min-height: 44px;
    padding-inline: 10px;
    gap: 6px;
    border-radius: 7px;
    font-size: 13px;
    white-space: nowrap;}

.hero-actions .button-primary {flex: 1.06 1 0;}

.hero-actions .button-ghost {flex: .94 1 0;}

.hero-actions .button svg {width: 16px;
    height: 16px;}

.task-card .chev {position: static;
    width: 17px;
    height: 17px;
    margin: 0 0 0 auto;}

.site-node-chrome {gap: 3px;
    min-height: 11px;
    margin: -1px 0 4px;
    padding-bottom: 4px;}

.site-node-chrome span {width: 4px;
    height: 4px;}

.site-screen {height: 62px;
    margin-top: 5px;
    padding: 4px;}

.site-screen-preview {height: 34px;}

.site-screen-preview::before {left: 5px;
    top: 6px;
    height: 3px;}

.site-screen-preview::after {left: 5px;
    top: 13px;
    height: 2px;}

.site-screen-mark {width: 18px;
    height: 12px;
    bottom: 4px;}

.site-screen-controls {grid-template-columns: 1fr 12px 12px;
    gap: 3px;
    margin-top: 3px;}

.site-screen-controls span,
.site-screen-controls i {height: 10px;}

.site-screen-controls span::after {left: 3px;
    top: 4px;
    height: 2px;}

.flow-in li::before,
.flow-out li::before {font-size: 12px;}

.project-arrow {width: 32px;
    height: 32px;
    padding: 7px;
    right: 9px;
    top: 9px;}

.process-grid article::before,
.process-grid article::after {display: none;}

.ai-copy {min-height: 0;
    padding-right: 0;}

.ai-art {position: static;
    width: 154px;
    margin: 8px auto -8px;
    opacity: 1;}

.ai-art img {width: 100%;
    height: auto;
    object-fit: contain;}
}

@media (min-width: 768px) and (max-width: 1180px) {
.ai-steps {min-width: 0;
    display: flex;
    justify-content: center;
    gap: 6px;}

.ai-steps > div {width: 90px;
    flex: 0 0 90px;}

.ai-steps > i {flex: 0 0 20px;
    margin-top: 27px;
    font-size: 24px;}

.ai-art {display: block;
    width: 220px;
    max-width: 100%;}
}

@media (max-width: 767px) {
.ai-art {display: block;
    width: 154px;
    max-width: 50%;}
}

@media (min-width: 1181px) {
.additional-grid {grid-template-columns: repeat(6, minmax(0, 1fr));}
}

.adv-grid,
.process-grid {grid-template-columns: repeat(3, minmax(0, 1fr));}

@media (min-width: 901px) and (max-width: 1180px) {
.services-layout {grid-template-columns: 1fr;}

.service-featured-body {grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 24px;}

.service-copy {max-width: 360px;}

.additional-grid {grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;}

.additional-grid article:nth-child(3n) {border-right: 0;}
}

@media (min-width: 768px) and (max-width: 1180px) {
.ai-card {grid-template-columns: minmax(0, 1fr) 180px;
    grid-template-areas:
      "copy art"
      "steps steps";
    gap: 18px 22px;
    align-items: start;}

.ai-copy {grid-area: copy;}

.ai-steps {grid-area: steps;}

.ai-art {grid-area: art;
    width: 180px;
    margin: 0;
    justify-self: end;
    align-self: start;}
}

@media (min-width: 768px) and (max-width: 900px) {
.additional-grid {grid-template-columns: repeat(3, minmax(0, 1fr));}
}

.adv-grid article {grid-template-columns: 80px minmax(0, 1fr);}

.adv-grid article > div {min-width: 0;}

@media (min-width: 768px) and (max-width: 900px) {
.adv-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}

.adv-grid article {grid-template-columns: 72px minmax(0, 1fr);}

.adv-grid h3,
.adv-grid p {overflow-wrap: break-word;}
}

@media (min-width: 768px) {
.service-featured > .accordion-trigger {display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    max-width: none;
    align-items: start;}

.service-featured > .accordion-trigger .card-title {min-width: 0;}

.service-featured-body {grid-template-columns: minmax(0, 1.22fr) minmax(250px, .78fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 18px;}

.service-featured .service-copy {max-width: none;
    min-width: 0;
    padding: 0 0 4px 70px;}

.service-featured .service-copy > p {max-width: 390px;
    margin-top: 0;}

.service-featured .check-list,
.service-featured .text-link {margin-left: 0;}

.service-featured .device-frame {min-width: 0;}
}

@media (min-width: 768px) and (max-width: 1180px) {
.services-layout {grid-template-columns: 1fr;}

.service-featured-body {grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);}

.service-featured .service-copy > p {max-width: 480px;}
}

.integration-zone,
.integration-diagram {min-width: 0;}

@media (min-width: 1181px) {
.integration-card {display: grid;
    grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
    gap: 42px;
    align-items: start;}

.integration-copy {min-width: 0;}

.integration-copy > p {max-width: 390px;}

.integration-diagram {display: grid;
    grid-template-columns: minmax(0, 1fr) 276px minmax(0, 1fr);
    gap: 18px;
    align-items: center;}

.integration-zone > .button {width: max-content;
    min-width: 270px;
    min-height: 48px;
    margin: 24px auto 0;
    padding-inline: 24px;
    white-space: nowrap;}
}

@media (min-width: 768px) and (max-width: 1180px) {
.integration-card {display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;}

.integration-copy > p {max-width: 680px;}

.external-systems > div {grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px 16px;}

.integration-diagram {display: grid;
    grid-template-columns: minmax(116px, .9fr) minmax(230px, 270px) minmax(145px, 1.1fr);
    column-gap: 18px;
    align-items: stretch;}

.integration-zone > .button {width: max-content;
    min-width: 270px;
    min-height: 48px;
    margin: 20px auto 0;
    padding-inline: 24px;
    white-space: nowrap;}
}

@media (min-width: 768px) {
.integration-diagram .flow,
.integration-diagram .site-node {height: 330px;
    min-height: 330px;}

.integration-diagram .flow {display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px 0 6px;
    border: 0;
    background: transparent;}

.integration-diagram .flow h3 {min-height: 38px;
    margin: 0 0 8px;
    display: flex;
    align-items: center;}

.integration-diagram .flow-in h3 {justify-content: flex-end;
    text-align: right;}

.integration-diagram .flow ul {flex: 1;
    display: grid;
    margin: 0;
    min-height: 0;}

.integration-diagram .flow-in ul {grid-template-rows: repeat(8, minmax(0, 1fr));}

.integration-diagram .flow-out ul {grid-template-rows: repeat(6, minmax(0, 1fr));}

.integration-diagram .flow li {position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 1.25;
    overflow: visible;}

.integration-diagram .flow-in li {justify-content: flex-end;
    text-align: right;}

.integration-diagram .flow-out li {justify-content: flex-start;
    text-align: left;}

.integration-diagram .site-node {display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px;
    border-color: #526168;
    border-radius: 14px;
    background: linear-gradient(155deg, #0c171d, #050c10 74%);
    box-shadow: 0 20px 42px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.025);}

.integration-diagram .site-node b {margin: 9px 0 12px;
    font-size: 21px;
    line-height: 1.18;}

.integration-diagram .site-screen {flex: 1;
    height: auto;
    min-height: 190px;
    margin: 0;
    padding: 9px;}

.integration-diagram .site-screen-preview {height: calc(100% - 34px);
    min-height: 126px;}

.integration-diagram .site-screen-controls {margin-top: 7px;}
}

@media (min-width: 768px) {
.integration-diagram {--connector-in-width: clamp(76px, 8vw, 96px);
    --connector-out-width: clamp(60px, 6.5vw, 76px);
    --connector-solid: 10px;
    --connector-clearance: 4px;
    --connector-arrow: 8px;
    --connector-dot-step: 9px;
    --connector-dot-size: 3px;
    column-gap: 18px;}

.integration-diagram .flow-in h3 {justify-content: flex-start;
    text-align: left;}

.integration-diagram .flow-in li {justify-content: flex-start;
    text-align: left;
    padding-left: 0;
    padding-right: calc(var(--connector-in-width) + 12px);
    background: none;}

.integration-diagram .flow-in li::after {content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: auto;
    width: calc(var(--connector-in-width) - var(--connector-arrow));
    height: var(--connector-dot-size);
    padding-left: calc(var(--connector-solid) + var(--connector-clearance));
    border: 0;
    box-sizing: border-box;
    color: var(--green);
    opacity: .9;
    transform: translateY(-50%);
    pointer-events: none;
    background:
      linear-gradient(currentColor, currentColor)
        left center / var(--connector-solid) 1px no-repeat border-box,
      radial-gradient(circle at 1.5px 1.5px, currentColor 1.5px, transparent 1.8px)
        right center / var(--connector-dot-step) var(--connector-dot-size) repeat-x content-box;}

.integration-diagram .flow-in li::before {content: "";
    position: absolute;
    top: 50%;
    
    right: calc(var(--connector-in-width) - var(--connector-arrow) - 2px);
    left: auto;
    width: 0;
    height: 0;
    border: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: var(--connector-arrow) solid var(--green);
    opacity: .95;
    transform: translateY(-50%);
    pointer-events: none;}

.integration-diagram .flow-out h3 {padding-left: calc(var(--connector-out-width) + 16px);}

.integration-diagram .flow-out li {justify-content: flex-start;
    text-align: left;
    padding-left: calc(var(--connector-out-width) + 16px);
    background: none;}

.integration-diagram .flow-out li::before {content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    width: calc(var(--connector-out-width) - var(--connector-arrow));
    height: var(--connector-dot-size);
    padding-right: calc(var(--connector-solid) + var(--connector-clearance));
    border: 0;
    box-sizing: border-box;
    color: var(--cyan);
    opacity: .9;
    transform: translateY(-50%);
    pointer-events: none;
    background:
      linear-gradient(currentColor, currentColor)
        right center / var(--connector-solid) 1px no-repeat border-box,
      
      radial-gradient(circle at calc(100% - 1.5px) 1.5px, currentColor 1.5px, transparent 1.8px)
        right center / var(--connector-dot-step) var(--connector-dot-size) repeat-x content-box;}

.integration-diagram .flow-out li::after {content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--connector-out-width) - var(--connector-arrow));
    right: auto;
    width: 0;
    height: 0;
    border: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: var(--connector-arrow) solid var(--cyan);
    opacity: .95;
    transform: translateY(-50%);
    pointer-events: none;}
}

@media (max-width: 767px) {
.additional-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}

.integration-card {display: grid;
    grid-template-columns: 1fr;
    gap: 12px;}

.integration-zone {display: grid;
    gap: 10px;}

.integration-diagram {display: grid;
    grid-template-columns: 1fr;
    gap: 8px;}

.integration-diagram .flow,
.integration-diagram .site-node {grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: auto;
    min-height: 0;}

.integration-diagram .flow {padding: 10px 12px;}

.integration-diagram .flow ul {display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 12px;}

.integration-diagram .flow li,
.integration-diagram .flow-in li {margin: 0;
    padding: 0;
    text-align: left;
    justify-content: flex-start;}

.integration-diagram .flow-in li::before,
.integration-diagram .flow-in li::after,
.integration-diagram .flow-out li::before,
.integration-diagram .flow-out li::after,
.integration-diagram .flow-in::before,
.integration-diagram .flow-in::after,
.integration-diagram .flow-out::before,
.integration-diagram .flow-out::after {content: none;
    display: none;}

.integration-diagram .site-node {padding: 12px;}

.integration-diagram .site-node b {font-size: 16px;}

.integration-diagram .site-screen {height: 118px;
    min-height: 118px;}

.integration-zone > .button {width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 2px 0 0;
    white-space: nowrap;}
}

@media (min-width: 768px) {
.service-featured .service-copy > p {margin-left: 0;}
}

@media (min-width: 768px) {
.integration-card {height: auto;
    min-height: 0;}

.integration-diagram .flow-in,
.integration-diagram .site-node,
.integration-diagram .flow-out {grid-column: auto;
    grid-row: auto;}

.integration-zone > .button {display: flex;
    justify-content: center;}
}

@media (min-width: 901px) {
.tasks.section-shell {padding: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(4, 14, 19, 0.7);}

.tasks.section-shell > .container {border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}
}

@media (min-width: 901px) {
.tasks .task-grid {gap: 0;
    background: transparent;}

.tasks .task-card {border: 0;
    border-radius: 0;
    background: transparent;}

.tasks .task-card:nth-child(n + 4) {border-top: 1px solid var(--line);}

.tasks .task-card:not(:nth-child(3n + 1)) {border-left: 1px solid var(--line);}
}

@media (min-width: 901px) {
.tasks.section-shell,
.additional.section-shell,
.integrations.section-shell,
.projects.section-shell,
.advantages.section-shell,
.process.section-shell,
.contact.section-shell {padding: 0;
    border-bottom: 1px solid var(--line);}

.tasks.section-shell > .container,
.additional.section-shell > .container,
.integrations.section-shell > .container,
.projects.section-shell > .container,
.advantages.section-shell > .container,
.process.section-shell > .container,
.contact.section-shell > .container {border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.tasks.section-shell,
.additional.section-shell,
.projects.section-shell,
.process.section-shell {background: rgba(9,22,28,.72);}

.services,
.integrations.section-shell,
.advantages.section-shell,
.ai-section,
.contact.section-shell {background: transparent;}

.tasks.section-shell {background: rgba(9,22,28,.72);}

.services {padding-top: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--line);}

.ai-section {border-bottom: 1px solid var(--line);}
}

@media (min-width: 901px) {
.services-layout {gap: 0;}

.service-small-grid {gap: 0;}

.service-featured,
.service-card {border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.service-small-grid > .service-card:nth-child(odd) {border-right: 1px solid var(--line);}

.service-small-grid > .service-card:nth-child(-n/**/+2) {border-bottom: 1px solid var(--line);}
}

@media (min-width: 1181px) {
.service-featured {border-right: 1px solid var(--line);}
}

@media (min-width: 901px) and (max-width: 1180px) {
.service-featured {border-bottom: 1px solid var(--line);}
}

@media (min-width: 901px) {
.projects .project-grid {gap: 0;}

.projects .project-card {border: 0;
    border-radius: 0;
    background: transparent;}

.projects .project-card:nth-child(even) {border-left: 1px solid var(--line);}

.projects .project-card:nth-child(n + 3) {border-top: 1px solid var(--line);}

.projects-lower {display: block;
    margin-top: 48px;}

.other-grid {grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;}

.other-card {border: 0;
    border-radius: 0;
    background: transparent;
    min-height: 190px;
    padding: 18px 20px;}

.other-card:not(:last-child) {border-right: 1px solid var(--line);}

.other-project-mark {width: 86px;
    height: 128px;
    border: 1px solid #4a555a;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: var(--green);}
}

@media (min-width: 901px) and (max-width: 1180px) {
.other-card {grid-template-columns: 76px 1fr 18px;
    padding: 14px;
    gap: 12px;}

.other-card img,
.other-project-mark {width: 76px;
    height: 112px;}
}

@media (max-width: 900px) {
.other-project-mark {width: 72px;
    height: 82px;
    border: 1px solid #4a555a;
    display: grid;
    place-items: center;
    color: var(--green);
    font-size: 24px;}
}

.projects-all {width: 250px;
  margin: 20px auto 0;
  display: flex;}

@media (min-width: 901px) {
.projects-lower h2 {white-space: nowrap;}

.adv-grid {gap: 0;}

.adv-grid article {border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.adv-grid article:not(:nth-child(3n)) {border-right: 1px solid var(--line);}

.adv-grid article:nth-child(n + 4) {border-top: 1px solid var(--line);}

.process-grid {gap: 0;}

.process-grid article {border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.process-grid article:not(:nth-child(3n)) {border-right: 1px solid var(--line);}

.process-grid article:nth-child(n + 4) {border-top: 1px solid var(--line);}
}

@media (max-width: 767px) {
.projects-all {width: 100%;
    min-height: 44px;
    margin-top: 8px;}
}

@media (min-width: 901px) {
.process .process-grid article {display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 10px;
    align-content: start;
    min-height: 170px;
    padding: 22px 28px 24px;}

.process .process-grid article::before,
.process .process-grid article::after {display: none !important; content: none !important;}

.process .process-grid article::after {top: 50px;}

.process .process-grid h3 {grid-column: 2;
    margin: 0;
    font-size: 20px;
    line-height: 1.22;}

.process .process-grid article > div {display: contents;}

.process .process-grid svg {grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 42px;
    height: 42px;
    margin-top: 2px;}

.process .process-grid p {grid-column: 2;
    margin: 0;
    max-width: 340px;}

.process.section-shell {border-bottom: 0;}

.ai-section {padding: 0;
    border-top: 1px solid #6f821c;
    border-bottom: 1px solid #6f821c;}

.ai-section > .container {padding-top: 22px;
    padding-bottom: 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.ai-card {border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}
}

@media (min-width: 901px) {
.contact.section-shell {background: transparent;}

.contact.section-shell > .container {padding-top: 42px;
    padding-bottom: 42px;}

.contact-card {gap: 0;
    padding: 0;
    align-items: stretch;}

.contact-copy {padding: 4px 54px 4px 0;}
}

@media (min-width: 901px) and (max-width: 1180px) {
.contact-copy {padding-right: 38px;}
}

@media (min-width: 901px) {
.metric:first-child {padding-left: 0;}

.metric:last-child {padding-right: 0;}

.tasks.section-shell > .container,
.additional.section-shell > .container,
.integrations.section-shell > .container,
.projects.section-shell > .container,
.advantages.section-shell > .container,
.process.section-shell > .container,
.contact.section-shell > .container {padding-left: 0;
    padding-right: 0;}

.services > .container,
.ai-section > .container {padding-left: 0;
    padding-right: 0;}
}

@media (max-width: 767px) {
.section-shell {padding: 0;
    border-bottom: 1px solid var(--line);}

.tasks.section-shell,
.additional.section-shell,
.projects.section-shell,
.process.section-shell {background: rgba(9,22,28,.72);}

.integrations.section-shell,
.advantages.section-shell,
.contact.section-shell,
.services {background: transparent;}

.section-shell > .container,
.additional .container,
.integrations .container {padding: 18px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.metrics-band {border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(4,14,19,.7);}

.metrics {margin-top: 0;
    padding: 0;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: transparent;}

.metric {min-height: 82px;
    margin: 0;
    padding: 11px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;}

.metric:nth-child(odd):not(:last-child) {border-right: 1px solid var(--line);}

.metric:nth-child(n + 3) {border-top: 1px solid var(--line);}

.metric:last-child {grid-column: 1 / -1;
    min-height: 76px;}

.tasks > .container {padding-top: 18px;}

.task-grid {display: block;
    gap: 0;}

.task-card {min-height: 0;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.task-card + .task-card {border-top: 1px solid var(--line);}

.services {padding: 18px 0;
    border-bottom: 1px solid var(--line);}

.services-layout,
.service-small-grid {gap: 0;}

.service-featured,
.service-card {min-height: 0;
    margin: 0;
    padding: 13px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.service-featured {border-bottom: 1px solid var(--line);}

.service-small-grid .service-card + .service-card {border-top: 1px solid var(--line);}

.additional-grid {gap: 0;}

.additional-grid article {min-height: 160px;
    padding: 13px 10px;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.additional-grid article:nth-child(odd) {border-right: 1px solid var(--line) !important;}

.additional-grid article:nth-child(n + 3) {border-top: 1px solid var(--line) !important;}

.project-grid {padding-left: 0;
    padding-right: 0;}

.project-card {border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.other-card {margin: 0;
    padding: 11px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.other-card + .other-card {border-top: 1px solid var(--line);}

.adv-grid {gap: 0;}

.adv-grid article {min-height: 0;
    margin: 0;
    padding: 13px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.adv-grid article + article {border-top: 1px solid var(--line);}

.process-grid article {border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.process.section-shell {border-bottom: 0;}

.ai-section {padding: 0;
    border-top: 1px solid #6f821c;
    border-bottom: 1px solid #6f821c;
    background: rgba(9,22,28,.72);}

.ai-section > .container {padding-top: 18px;
    padding-bottom: 18px;}

.ai-card {padding-left: 0;
    padding-right: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}

.contact-card {padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;}
}

@media (max-width: 767px) {
.integrations .integration-zone {display: block;}

.integrations .integration-diagram {display: none;}

.integrations .integration-zone > .button {width: 100%;
    margin-top: 16px;}

.projects .project-slider {overflow: visible;}

.projects .project-grid.slider-track {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;}

.projects .project-card {display: flex !important;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex-basis: auto;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
    scroll-snap-align: none;}

.projects .project-card .responsive-project-image {order: -1;
    display: block;
    width: 100%;}

.projects .project-card img {display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    object-fit: cover;}

.projects .project-text {order: 1;
    padding: 18px 16px 16px;}

.projects .project-card h3 {padding-right: 42px;
    margin: 0 0 4px;
    font-size: 21px;
    line-height: 1.2;}

.projects .project-type,
.projects .project-role {font-size: 14px;
    line-height: 1.45;}

.projects .project-type {margin: 0 0 12px;}

.projects .project-role {margin: 0 0 12px;}

.projects .project-card .check-list {margin: 12px 0 14px;}

.projects .project-card .check-list li {margin: 6px 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.4;}

.projects .project-card .tags {gap: 6px;}

.projects .project-arrow {top: auto;
    right: 14px;
    bottom: 14px;
    width: 34px;
    height: 34px;}

.projects .slider-ui {display: none !important;}

.advantages .adv-grid {display: block;}

.advantages .adv-grid article {display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 14px;
    min-height: 0;
    margin: 0;
    padding: 18px 0;
    border: 0;
    border-radius: 0;
    background: transparent;}

.advantages .adv-grid article + article {border-top: 1px solid var(--line);}

.advantages .big-icon {width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 0;
    font-size: 14px;}

.advantages .big-icon svg {width: 24px;
    height: 24px;}

.advantages .adv-grid h3 {margin: 0 0 7px;
    font-size: 17px;
    line-height: 1.25;}

.advantages .adv-grid h3 br {display: none;}

.advantages .adv-grid p {margin: 0;
    font-size: 14px;
    line-height: 1.5;}

.process .process-grid {display: block;
    position: static;}

.process .process-grid::before,
.process .process-grid article::before,
.process .process-grid article::after {display: none !important;
    content: none !important;}

.process .process-grid article {display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 18px 0;
    border: 0;
    border-radius: 0;
    background: transparent;}

.process .process-grid article + article {border-top: 1px solid var(--line);}

.process .process-grid b {position: static;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--green);
    font-size: 26px;
    line-height: 1;
    font-weight: 400;}

.process .process-grid h3 {grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 18px;
    line-height: 1.25;}

.process .process-grid article > div {grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    align-items: start;}

.process .process-grid svg {width: 24px;
    height: 24px;}

.process .process-grid p {margin: 0;
    font-size: 14px;
    line-height: 1.5;}

.ai-section {background: transparent !important;}

.ai-art {display: none !important;}

.ai-copy {min-height: 0;
    padding-right: 0 !important;}

.ai-card {background: transparent !important;}
}

@media (max-width: 767px) {
.tasks > .container {padding-top: 30px;}

.tasks .card-title em {display: none !important;}

.services .card-title em,
.services .icon-box,
.services .service-icon {display: none !important;}

.services .accordion-trigger {gap: 10px;}

.services .card-title {padding-top: 0;
    font-size: 16px;
    line-height: 1.3;}

.services .service-featured,
.services .service-card {padding-top: 14px;
    padding-bottom: 14px;}

.services .service-featured .service-copy > p,
.services .service-card .accordion-panel p,
.services .service-featured .text-link,
.services .service-card .text-link {margin-left: 0;}

.additional-grid article {min-height: 112px;
    padding: 12px 14px;}

.additional-grid svg {width: 25px;
    height: 25px;}

.additional-grid h3 {margin-top: 8px;
    font-size: 14px;
    line-height: 1.25;}

.additional-grid article > span {right: 12px;
    bottom: 8px;}

.external-systems {border-radius: 0 !important;}

.advantages .big-icon.hex {border: 1px solid var(--line) !important;
    border-radius: 0 !important;
    clip-path: none !important;}

.process .process-grid b {display: none !important;}

.process .process-grid article {display: block;
    padding: 17px 0;}

.process .process-grid h3 {margin: 0 0 9px;
    font-size: 18px;
    line-height: 1.25;}

.process .process-grid article > div {display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    align-items: start;}
}