:root {
  --bg: #EAE8E1;
  --s: #F4F2EC;
  --b: #D5D1C6;
  --t: #282C28;
  --m: #686C64;
  --p: #315F9F;
  --inv: #202622;
  --invt: #F2F1EA
}

[data-theme=dark] {
  --bg: #171D1A;
  --s: #222A26;
  --b: #38423B;
  --t: #F0F1EA;
  --m: #A2AAA0;
  --p: #79A7ED;
  --inv: #202722;
  --invt: #F0F1EA
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(178, 157, 115, .10), transparent 42%),
    var(--bg);
  color: var(--t);
  font: 16px/1.65 Inter, system-ui, sans-serif;
  transition: background .4s, color .4s;
  overflow-x: hidden;
  animation: in .5s
}

@keyframes in {
  from {
    opacity: 0
  }
}

h1,
h2,
h3,
.logo {
  font-family: Manrope, sans-serif;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0
}

h1 {
  font-size: clamp(2.5rem, 7vw, 5.4rem);
  font-weight: 800;
  max-width: 15ch
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  max-width: 20ch
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em
}

body h1 {
  font-family: Manrope, sans-serif;
  font-size: clamp(2.5rem, 7vw, 5.4rem);
  font-weight: 800
}

body h2 {
  font-family: Manrope, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800
}

body h3 {
  font-family: Manrope, sans-serif;
  font-size: 1.25rem;
  font-weight: 700
}

p {
  margin: 0;
  color: var(--m)
}

a {
  color: inherit;
  text-decoration: none
}

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

.w {
  max-width: 1200px;
  margin: auto;
  padding: 0 clamp(20px, 4vw, 48px)
}

section {
  padding: clamp(80px, 8.5vw, 112px) 0;
  position: relative
}

.eyebrow {
  font: 600 .75rem Manrope;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p);
  display: block;
  margin-bottom: 20px
}

.lead {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 56ch;
  margin-top: 24px
}

:focus-visible {
  outline: 2px solid var(--p);
  outline-offset: 3px
}

.skip {
  position: absolute;
  left: -999px
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 99;
  background: var(--p);
  color: #fff;
  padding: 8px 14px
}

header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s
}

header.sc {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--b), 0 8px 24px rgba(15, 23, 42, .06)
}

.bar-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px
}

.logo {
  display: inline-flex;
  align-items: center;
  color: #202622;
  font: 900 1.18rem/1 Manrope, sans-serif;
  letter-spacing: .06em;
  white-space: nowrap
}

[data-theme=dark] .logo {
  color: #f5f5f0
}

nav ul {
  display: flex;
  gap: 32px
}

nav a {
  position: relative;
  font-weight: 500;
  font-size: .95rem
}

nav a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: var(--p);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s
}

nav a:hover:after,
nav a.on:after {
  transform: scaleX(1)
}

.hr {
  display: flex;
  align-items: center;
  gap: 14px
}

.tg,
.bg {
  width: 44px;
  height: 44px;
  border: 1px solid var(--b);
  background: var(--s);
  border-radius: 8px;
  cursor: pointer;
  color: var(--t);
  font-size: 1.1rem;
  transition: transform .3s, border-color .3s
}

.tg i,
.bg i {
  display: block
}

.tg:hover {
  border-color: var(--p);
  transform: rotate(18deg)
}

.bg {
  display: none
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 600;
  background: var(--p);
  color: #fff;
  border: 1px solid var(--p);
  transition: background .3s, color .3s, transform .3s;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem
}

.btn:hover {
  background: var(--t);
  border-color: var(--t);
  color: var(--bg);
  transform: translateY(-2px)
}

.btn.gh {
  background: transparent;
  color: var(--t);
  border-color: var(--b)
}

.btn.gh:hover {
  border-color: var(--p);
  background: var(--s);
  color: var(--t)
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px
}

#mm {
  display: none
}

#mm[hidden] {
  display: none !important
}

.mobile-menu-open {
  overscroll-behavior: none
}

.mobile-menu-open #mm:not([hidden]) {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--t);
  overscroll-behavior: contain;
  animation: mobile-menu-enter .22s ease-out both
}

@keyframes mobile-menu-enter {
  from { opacity: 0; transform: translateY(-8px) }
  to { opacity: 1; transform: translateY(0) }
}

.mobile-menu-inner {
  width: min(100%, 620px);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 clamp(24px, 7vw, 44px)
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px
}

.mobile-menu-close {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--b);
  border-radius: 8px;
  background: var(--s);
  color: var(--t);
  font: 600 .82rem Inter, sans-serif;
  cursor: pointer
}

.mobile-menu-close i {
  color: var(--p);
  font-size: 1rem
}

.mobile-menu-label {
  margin: clamp(44px, 10vh, 88px) 0 16px;
  color: var(--p);
  font: 700 .7rem Manrope, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase
}

.mobile-menu-open #mm nav {
  display: block
}

.mobile-menu-open #mm nav ul {
  display: grid;
  gap: 0
}

.mobile-menu-open #mm nav li {
  border-bottom: 1px solid var(--b)
}

.mobile-menu-open #mm nav a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 0;
  font: 700 clamp(1.35rem, 6vw, 1.8rem)/1.2 Manrope, sans-serif;
  letter-spacing: -.035em;
  transition: color .18s, padding .18s
}

.mobile-menu-open #mm nav a:after {
  display: none
}

.mobile-menu-open #mm nav a>i {
  justify-self: end;
  color: var(--m);
  font-size: .8rem;
  transition: color .18s, transform .18s
}

.mobile-menu-open #mm nav a:hover,
.mobile-menu-open #mm nav a[aria-current=page] {
  color: var(--p);
  padding-left: 5px
}

.mobile-menu-open #mm nav a:hover>i,
.mobile-menu-open #mm nav a[aria-current=page]>i {
  color: var(--p);
  transform: translate(2px, -2px)
}

.mobile-menu-footer {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 32px 0 8px
}

.mobile-menu-footer p {
  color: var(--m);
  font-size: .83rem
}

.mobile-menu-footer>a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--p);
  font: 700 1rem Manrope, sans-serif
}

.mobile-menu-footer>a i {
  transition: transform .18s
}

.mobile-menu-footer>a:hover i {
  transform: translateX(4px)
}

@media(prefers-reduced-motion:reduce) {
  .mobile-menu-open #mm:not([hidden]) {
    animation: none
  }
}

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  overflow: hidden
}

.grid-bg {
  position: absolute;
  inset: -10% 0;
  background-image: linear-gradient(var(--b) 1px, transparent 1px), linear-gradient(90deg, var(--b) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%)
}

.hero .w {
  position: relative;
  z-index: 2
}

.hero.sm {
  min-height: 70svh
}

.hero .w.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center
}

.hero-copy {
  min-width: 0
}

.hero-visual {
  position: relative;
  margin: 0;
  border: 1px solid var(--b);
  border-radius: 18px;
  overflow: hidden;
  background: var(--s);
  box-shadow: 0 28px 80px -40px rgba(15, 23, 42, .4);
  transform: rotate(1deg)
}

.hero-visual img,
.hero-visual video {
  display: block;
  width: 100%;
  height: clamp(280px, 38vw, 440px);
  object-fit: cover
}

.hero-video-visual {
  transform: none
}

.hero-visual figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--t)
}

.hero-visual figcaption i {
  color: var(--p)
}

.line {
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr;
  gap: clamp(16px, 2.4vw, 24px);
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--b)
}

.num {
  font: 700 .85rem Manrope;
  color: var(--p)
}

.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  margin-top: 56px
}

.c {
  background: var(--s);
  border: 1px solid var(--b);
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .24);
  transition: transform .35s, border-color .35s, box-shadow .35s;
  position: relative
}

.c:hover {
  transform: translateY(-6px);
  border-color: var(--p);
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--p) 55%, transparent)
}

.c .ic {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 18px 0 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--p) 10%, var(--s));
  color: var(--p);
  font-size: 1.25rem;
  transition: transform .4s
}

.c:hover .ic {
  transform: scale(1.1) rotate(-6deg)
}

.svc-icon {
  color: var(--p);
  font-size: 1.25rem;
  margin-right: 10px
}

.c p {
  margin-top: 10px
}

.tl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 64px
}

.track {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--b)
}

.bar {
  position: absolute;
  inset: 0;
  background: var(--p);
  transform: scaleX(0);
  transform-origin: left
}

.step {
  padding-top: 34px;
  position: relative
}

.step:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--p)
}

.step p {
  margin-top: 10px;
  font-size: .95rem
}

.nx {
  background: var(--inv);
  color: var(--invt);
  overflow: hidden
}

.nx p {
  color: #94A3B8
}

.nx .eyebrow {
  color: #60A5FA
}

.split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: center
}

.badge {
  display: inline-block;
  border: 1px solid #334155;
  padding: 6px 12px;
  border-radius: 99px;
  font: 600 .72rem Manrope;
  letter-spacing: .14em;
  color: #93C5FD;
  margin-bottom: 24px
}

.dash {
  background: #0B1120;
  border: 1px solid #1E293B;
  border-radius: 12px;
  padding: 16px;
  color: #F8FAFC;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
  font-size: .8rem
}

.dash p {
  color: #94A3B8
}

.dots {
  display: flex;
  gap: 6px;
  margin-bottom: 14px
}

.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1E293B
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px
}

.kpi {
  min-width: 0;
  border: 1px solid #1E293B;
  border-radius: 8px;
  padding: 12px;
  background: #111827
}

.kpi p,
.kpi b {
  overflow-wrap: anywhere
}

.kpi b {
  display: block;
  font: 700 1.15rem Manrope;
  margin-top: 4px
}

.dg {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 10px;
  margin-top: 10px
}

.pn {
  border: 1px solid #1E293B;
  border-radius: 8px;
  padding: 12px;
  background: #111827
}

.mesas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px
}

.mesas i {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid #334155;
  display: grid;
  place-items: center;
  font: 600 .7rem Manrope;
  font-style: normal
}

.mesas .o {
  background: #2563EB;
  border-color: #2563EB
}

.mesas .r {
  border-style: dashed;
  color: #93C5FD
}

.mesas .f {
  background: #F8FAFC;
  color: #0F172A
}

.k {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #1E293B
}

.k em {
  font-style: normal;
  color: #93C5FD
}

.stk {
  height: 6px;
  background: #1E293B;
  border-radius: 3px;
  margin: 6px 0 10px
}

.stk i {
  display: block;
  height: 100%;
  background: #3B82F6;
  border-radius: 3px
}

.dash.big {
  padding: 22px;
  font-size: .9rem
}

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: .85rem;
  color: #94A3B8
}

.legend span {
  white-space: nowrap
}

.legend i {
  color: #60A5FA
}

.diff-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end
}

.diff-heading .eyebrow {
  margin-bottom: 12px
}

.diff-heading .lead {
  margin: 0 0 4px;
  justify-self: end
}

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

.diff-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 26px 22px;
  min-height: 150px;
  background: var(--s);
  border: 1px solid var(--b);
  border-radius: 12px;
  box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .24);
  transition: transform .25s, border-color .25s, box-shadow .25s
}

.diff-card:hover {
  transform: translateY(-4px);
  border-color: var(--p);
  box-shadow: 0 16px 36px -24px color-mix(in srgb, var(--p) 55%, transparent)
}

.diff-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--p) 10%, var(--s));
  color: var(--p);
  font-size: 1.1rem
}

.diff-card h3 {
  font-size: 1.05rem;
  line-height: 1.35
}

.diff-card p {
  margin-top: 8px;
  font-size: .93rem;
  line-height: 1.6
}

.diagnosis {
  overflow: hidden
}

.diagnosis-heading {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: clamp(32px, 7vw, 88px);
  align-items: end
}

.diagnosis-heading .eyebrow {
  margin-bottom: 16px
}

.diagnosis-heading h2 {
  max-width: 17ch
}

.diagnosis-heading .lead {
  max-width: 52ch;
  margin: 0 0 4px
}

.ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-top: 64px
}

.ba-panel {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--b);
  border-radius: 18px;
  background: var(--s);
  box-shadow: 0 24px 60px -44px rgba(15, 23, 42, .35)
}

.ba-panel-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px
}

.ba-marker {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, #F97316 12%, var(--s));
  color: #EA580C
}

.ba-a .ba-marker {
  background: color-mix(in srgb, var(--p) 12%, var(--s));
  color: var(--p)
}

.ba-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--m);
  font: 600 .68rem Manrope;
  letter-spacing: .1em;
  text-transform: uppercase
}

.ba h3 {
  color: var(--t);
  font-size: 1.1rem;
  letter-spacing: .08em
}

.ba-panel ul {
  display: grid;
  gap: 10px
}

.ba-panel li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--b);
  border-radius: 10px;
  background: var(--bg);
  font-weight: 600;
  overflow-wrap: anywhere
}

.ba-panel li i {
  width: 18px;
  flex: none;
  text-align: center;
  color: var(--m)
}

.ba-a li {
  border-color: color-mix(in srgb, var(--p) 24%, var(--b))
}

.ba-a li i {
  color: var(--p)
}

.core {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  perspective: 850px;
  isolation: isolate
}

.core:before {
  content: "";
  position: absolute;
  inset: 17%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--p) 24%, transparent), transparent 70%);
  filter: blur(10px)
}

.core:after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 17%;
  left: 22%;
  width: 56%;
  height: 14%;
  border-radius: 50%;
  background: rgba(15, 23, 42, .28);
  filter: blur(11px);
  transform: rotate(-8deg)
}

.core-orbit {
  position: absolute;
  inset: 8px -5px;
  border: 1px solid color-mix(in srgb, var(--p) 25%, transparent);
  border-radius: 50%;
  transform: rotate(-28deg) rotateX(68deg);
  animation: core-orbit 18s linear infinite
}

.core-orbit:before,
.core-orbit:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #60A5FA;
  box-shadow: 0 0 16px 3px color-mix(in srgb, var(--p) 55%, transparent)
}

.core-orbit:before {
  width: 9px;
  height: 9px;
  top: 14%;
  left: 17%
}

.core-orbit:after {
  width: 6px;
  height: 6px;
  right: 8%;
  bottom: 25%;
  opacity: .65
}

.core-mark {
  position: relative;
  z-index: 1;
  width: clamp(96px, 9vw, 122px);
  overflow: visible;
  filter: drop-shadow(0 12px 16px rgba(15, 23, 42, .24));
  transform: rotateY(-12deg) rotateX(6deg) translateZ(20px);
  animation: core-mark-float 4s ease-in-out infinite
}

.n-depth path {
  fill: #87909B;
  stroke: #717B87;
  stroke-width: .6;
  stroke-linejoin: round
}

.n-front {
  fill: url(#n-face);
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round
}

.n-gloss {
  fill: url(#n-highlight);
  opacity: .7
}

.tech-orbit {
  --orbit-duration: 32s;
  --orbit-radius: clamp(54px, 5vw, 66px);
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: center;
  animation: tech-orbit-spin var(--orbit-duration) linear infinite
}

.tech-orbit:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--orbit-radius) * 2);
  height: calc(var(--orbit-radius) * 2);
  border: 1px solid color-mix(in srgb, var(--p) 18%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%)
}

.tech-satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--p) 22%, var(--b));
  border-radius: 11px;
  background: color-mix(in srgb, var(--s) 96%, transparent);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .12), inset 0 1px rgba(255, 255, 255, .8);
  color: var(--p);
  font-size: .95rem;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--angle)));
  backface-visibility: hidden
}

.tech-satellite i {
  animation: tech-icon-counter var(--orbit-duration) linear infinite
}

.tech-satellite:nth-child(2) i {
  color: #16A34A
}

.tech-satellite:nth-child(3) i {
  color: #F97316
}

.tech-satellite:nth-child(4) i {
  color: #64748B
}

.tech-satellite:nth-child(5) i {
  color: #7C3AED
}

.tech-satellite:nth-child(6) i {
  color: #0EA5E9
}

.core-caption {
  position: absolute;
  bottom: -22px;
  white-space: nowrap;
  color: var(--m);
  font: 600 .58rem Manrope;
  letter-spacing: .12em
}

@keyframes core-mark-float {

  0%,
  100% {
    transform: rotateY(-12deg) rotateX(6deg) translate3d(0, 0, 20px)
  }

  50% {
    transform: rotateY(-7deg) rotateX(9deg) translate3d(0, -5px, 24px)
  }
}

@keyframes tech-orbit-spin {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes tech-icon-counter {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(-360deg)
  }
}

@keyframes core-orbit {
  to {
    transform: rotate(360deg)
  }
}

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0F172A;
  color: #fff;
  text-align: center
}

.cta:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(13, 15, 17, .68)
}

.cta-video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.cta .w {
  position: relative;
  z-index: 1
}

.cta h2 {
  margin: auto;
  max-width: 18ch
}

.cta p {
  color: #DBEAFE;
  margin: 24px auto 0;
  max-width: 50ch
}

.cta .btn {
  background: #fff;
  color: #0F172A;
  border-color: #fff;
  margin-top: 40px
}

.cta .btn:hover {
  background: #0F172A;
  color: #fff
}

body[data-page="nexcontrol.html"] .cta,
body[data-page="servicos.html"] .cta {
  background-image: url("../assets/images/bac-image.png");
  background-position: center 32%;
  background-size: cover
}

.flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 48px
}

.flow b {
  border: 1px solid #334155;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: Manrope
}

.flow span {
  color: #60A5FA
}

.svc {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 5vw, 48px);
  align-items: start;
  padding: clamp(40px, 5vw, 56px) 0;
  border-top: 1px solid var(--b)
}

.svc dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px 16px;
  margin: 0
}

.svc dt {
  font: 600 .75rem Manrope;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p);
  padding-top: 4px
}

.svc dd {
  margin: 0;
  color: var(--m)
}

.svc .btn {
  margin-top: 24px
}

body[data-page="servicos.html"] .hero-visual {
  transform: none;
  border-radius: 22px;
  box-shadow: 0 28px 72px -38px rgba(15, 23, 42, .32)
}

body[data-page="servicos.html"] .hero-visual img {
  height: clamp(300px, 34vw, 410px)
}

body[data-page="servicos.html"] .hero-visual figcaption {
  border-top: 1px solid var(--b);
  background: var(--s)
}

body[data-page="servicos.html"] .hero .btns {
  margin-top: 32px
}

body[data-page="servicos.html"] .svc {
  position: relative;
  margin: 20px 0;
  padding: clamp(24px, 3.6vw, 40px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  border: 1px solid var(--b);
  border-radius: 18px;
  background: var(--s);
  box-shadow: 0 16px 42px -38px rgba(15, 23, 42, .3);
  transition: border-color .25s, box-shadow .25s, transform .25s
}

body[data-page="servicos.html"] .svc:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--p) 34%, var(--b));
  box-shadow: 0 22px 48px -38px rgba(15, 23, 42, .36)
}

body[data-page="servicos.html"] .svc>div:first-child {
  position: relative;
  padding-left: 0
}

body[data-page="servicos.html"] .svc .num {
  display: none
}

body[data-page="servicos.html"] .svc h2 {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: clamp(1.5rem, 2.3vw, 1.9rem) !important;
  line-height: 1.2;
  letter-spacing: -.035em
}

body[data-page="servicos.html"] .svc-icon {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--p) 16%, var(--b));
  border-radius: 13px;
  background: color-mix(in srgb, var(--p) 8%, var(--bg));
  font-size: 1.05rem
}

body[data-page="servicos.html"] .svc>div>p {
  max-width: 48ch;
  margin-top: 16px;
  color: var(--m);
  font-size: .96rem;
  line-height: 1.75
}

body[data-page="servicos.html"] .svc dl {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 14px;
  padding: 13px 19px;
  border: 1px solid color-mix(in srgb, var(--b) 75%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 70%, var(--s))
}

body[data-page="servicos.html"] .svc dt,
body[data-page="servicos.html"] .svc dd {
  padding: 13px 0;
  border-bottom: 1px solid var(--b)
}

body[data-page="servicos.html"] .svc dt {
  font-size: .64rem;
  letter-spacing: .08em
}

body[data-page="servicos.html"] .svc dd {
  font-size: .88rem;
  line-height: 1.6
}

body[data-page="servicos.html"] .svc dt:nth-last-of-type(1),
body[data-page="servicos.html"] .svc dd:last-child {
  border-bottom: 0
}

body[data-page="servicos.html"] .svc .btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: .92rem
}

@media(max-width:900px) {
  body[data-page="servicos.html"] .svc {
    grid-template-columns: 1fr;
    gap: 24px
  }
}

@media(max-width:600px) {
  body[data-page="servicos.html"] .svc {
    margin: 14px 0;
    padding: 20px 17px;
    border-radius: 15px
  }

  body[data-page="servicos.html"] .svc h2 {
    gap: 10px;
    font-size: 1.4rem !important
  }

  body[data-page="servicos.html"] .svc-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px
  }

  body[data-page="servicos.html"] .svc>div>p {
    margin-top: 13px;
    font-size: .91rem
  }

  body[data-page="servicos.html"] .svc dl {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 15px
  }

  body[data-page="servicos.html"] .svc dt {
    padding: 10px 0 0;
    border: 0
  }

  body[data-page="servicos.html"] .svc dd {
    padding: 3px 0 10px
  }

  body[data-page="servicos.html"] .svc dd:last-child {
    padding-bottom: 5px
  }
}

body[data-page="nexcontrol.html"] .hero-visual {
  transform: none;
  border-radius: 22px;
  box-shadow: 0 28px 72px -38px rgba(15, 23, 42, .34)
}

body[data-page="nexcontrol.html"] .hero-visual img {
  height: clamp(300px, 34vw, 410px)
}

body[data-page="nexcontrol.html"] .hero-visual figcaption {
  border-top: 1px solid var(--b);
  background: var(--s)
}

body[data-page="nexcontrol.html"] .nc-overview {
  padding-top: clamp(44px, 6vw, 72px) !important
}

body[data-page="nexcontrol.html"] .nc-overview-heading,
body[data-page="nexcontrol.html"] .nc-section-heading {
  max-width: 760px;
  margin: 0 auto;
  text-align: center
}

body[data-page="nexcontrol.html"] .nc-overview-heading .eyebrow,
body[data-page="nexcontrol.html"] .nc-section-heading .eyebrow {
  margin-bottom: 14px
}

body[data-page="nexcontrol.html"] .nc-overview-heading h2,
body[data-page="nexcontrol.html"] .nc-section-heading h2 {
  margin: 0 auto;
  max-width: 24ch
}

body[data-page="nexcontrol.html"] .nc-overview-heading p,
body[data-page="nexcontrol.html"] .nc-section-heading p {
  max-width: 58ch;
  margin: 16px auto 0;
  font-size: 1.05rem
}

body[data-page="nexcontrol.html"] .nc-dashboard {
  max-width: 1040px;
  margin: 38px auto 0
}

body[data-page="nexcontrol.html"] .nc-dashboard-note {
  margin-top: 12px;
  text-align: center;
  font-size: .82rem
}

body[data-page="nexcontrol.html"] .nc-features {
  padding-top: clamp(64px, 8vw, 96px) !important
}

body[data-page="nexcontrol.html"] .nc-feature-list {
  margin-top: 42px
}

body[data-page="nexcontrol.html"] .nx .w {
  max-width: 1100px
}

body[data-page="nexcontrol.html"] .nx h2 {
  max-width: none
}

body[data-page="nexcontrol.html"] .nc-process-intro {
  margin-top: 14px
}

body[data-page="nexcontrol.html"] .nx .flow span i {
  transform: rotate(-90deg)
}

body[data-page="nexcontrol.html"] .nc-benefits {
  padding-top: clamp(64px, 8vw, 96px)
}

body[data-page="nexcontrol.html"] .nc-benefits .cards {
  margin-top: 40px
}

body[data-page="nexcontrol.html"] .nc-benefits .c .ic {
  margin: 0 0 18px
}

body[data-page="nexcontrol.html"] .nc-benefits .c p {
  margin-top: 10px
}

body[data-page="nexcontrol.html"] .dash.big {
  padding: clamp(18px, 3vw, 30px);
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, #17294A 0, #0B1120 55%);
  box-shadow: 0 34px 82px -42px rgba(15, 23, 42, .55)
}

body[data-page="nexcontrol.html"] .dash.big .dots {
  align-items: center;
  gap: 8px;
  margin-bottom: 22px
}

body[data-page="nexcontrol.html"] .dash.big .dots i {
  width: 10px;
  height: 10px;
  background: #334155
}

body[data-page="nexcontrol.html"] .dash.big .dots i:first-child {
  background: #F87171
}

body[data-page="nexcontrol.html"] .dash.big .dots i:nth-child(2) {
  background: #FBBF24
}

body[data-page="nexcontrol.html"] .dash.big .dots i:nth-child(3) {
  background: #34D399
}

body[data-page="nexcontrol.html"] .dash.big .kpi {
  padding: 16px;
  border-radius: 12px;
  background: rgba(17, 24, 39, .84)
}

body[data-page="nexcontrol.html"] .dash.big .kpi p {
  font-size: .76rem
}

body[data-page="nexcontrol.html"] .dash.big .kpi b {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  white-space: nowrap
}

body[data-page="nexcontrol.html"] .dash.big .dg {
  gap: 14px;
  margin-top: 14px
}

body[data-page="nexcontrol.html"] .dash.big .pn {
  padding: 16px;
  border-radius: 12px
}

body[data-page="nexcontrol.html"] .line {
  grid-template-columns: 48px minmax(190px, .78fr) minmax(0, 1.22fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: center;
  margin: 18px 0;
  padding: 22px;
  border: 1px solid var(--b);
  border-radius: 16px;
  background: var(--s);
  box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .24);
  transition: transform .25s, border-color .25s, box-shadow .25s
}

body[data-page="nexcontrol.html"] .line:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--p) 35%, var(--b));
  box-shadow: 0 20px 48px -38px rgba(15, 23, 42, .4)
}

body[data-page="nexcontrol.html"] .line>.num {
  align-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--p) 9%, var(--s));
  font-size: .9rem
}

body[data-page="nexcontrol.html"] .line h3 {
  font-size: 1.25rem
}

body[data-page="nexcontrol.html"] .line>div:nth-of-type(1)>p {
  margin-top: 10px !important;
  font-size: .96rem;
  line-height: 1.65
}

body[data-page="nexcontrol.html"] .line>div:nth-of-type(2)>.dash {
  height: 100%;
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(145deg, #111827, #0B1120);
  box-shadow: none
}

body[data-page="nexcontrol.html"] .line .flow {
  gap: 8px
}

body[data-page="nexcontrol.html"] .line .flow b {
  padding: 10px 12px;
  border-radius: 8px;
  background: #111827;
  font-size: .8rem
}

body[data-page="nexcontrol.html"] .line .flow span {
  font-size: .75rem
}

body[data-page="nexcontrol.html"] .nx .flow {
  justify-content: center;
  gap: 10px
}

body[data-page="nexcontrol.html"] .nx .flow b {
  padding: 12px 16px;
  border: 1px solid #334155;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04)
}

body[data-page="nexcontrol.html"] .nx .flow span {
  font-size: .8rem
}

body[data-page="nexcontrol.html"] .nx .flow span i {
  color: #60A5FA
}

body[data-page="nexcontrol.html"] .nc-process-steps {
  position: relative;
  margin: 54px 0 0
}

body[data-page="nexcontrol.html"] .nc-process-steps ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none
}

body[data-page="nexcontrol.html"] .nc-process-steps li {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center
}

body[data-page="nexcontrol.html"] .nc-process-track {
  position: absolute;
  z-index: 0;
  top: 50px;
  left: 7.14%;
  right: 7.14%;
  height: 2px;
  background: #334155
}

body[data-page="nexcontrol.html"] .nc-process-track i {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #60A5FA, #BFDBFE, transparent);
  box-shadow: 0 0 14px 2px rgba(96, 165, 250, .75);
  animation: nc-process-beam 3.2s ease-in-out infinite alternate
}

body[data-page="nexcontrol.html"] .nc-step-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid #3B4B66;
  border-radius: 18px;
  background: #172033;
  color: #BFDBFE;
  font-size: 1.1rem;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .22);
  transition: transform .25s, border-color .25s, color .25s, background .25s
}

body[data-page="nexcontrol.html"] .nc-process-steps li:hover .nc-step-icon {
  transform: translateY(-4px);
  border-color: #60A5FA;
  background: #1E3A5F;
  color: #fff
}

body[data-page="nexcontrol.html"] .nc-process-steps strong {
  margin-top: 13px;
  color: #E2E8F0;
  font: 600 .88rem Manrope
}

@keyframes nc-process-beam {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(400%)
  }
}

body[data-page="nexcontrol.html"] .cards .c {
  min-height: 152px;
  padding: 28px;
  border-radius: 14px
}

body[data-page="nexcontrol.html"] .cards .c h3 {
  font-size: 1.1rem
}

body[data-page="nexcontrol.html"] .cards .c p {
  line-height: 1.65
}

@media(max-width:900px) {
  body[data-page="nexcontrol.html"] .line {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px 18px;
    padding: 20px
  }

  body[data-page="nexcontrol.html"] .line>:last-child {
    grid-column: 2
  }

  body[data-page="nexcontrol.html"] .line>div:nth-of-type(2)>.dash {
    height: auto
  }

  body[data-page="nexcontrol.html"] .nx .flow {
    flex-direction: row;
    align-items: center;
    justify-content: center
  }

  body[data-page="nexcontrol.html"] .nx .flow span i {
    transform: rotate(-90deg)
  }
}

@media(max-width:900px) {
  body[data-page="nexcontrol.html"] .nc-process-steps {
    margin: 34px 0 0
  }

  body[data-page="nexcontrol.html"] .nc-process-steps ol {
    grid-template-columns: 1fr;
    gap: 9px
  }

  body[data-page="nexcontrol.html"] .nc-process-steps li {
    display: grid;
    grid-template-columns: 36px 42px minmax(0, 1fr);
    gap: 0 10px;
    align-items: center;
    padding: 9px 14px;
    border: 1px solid #263449;
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
    text-align: left
  }

  body[data-page="nexcontrol.html"] .nc-step-icon {
    grid-row: 1;
    grid-column: 2;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: .95rem
  }

  body[data-page="nexcontrol.html"] .nc-process-steps strong {
    grid-row: 1;
    grid-column: 3;
    margin: 0;
    font-size: .95rem
  }

  body[data-page="nexcontrol.html"] .nc-process-track {
    top: 29px;
    bottom: 29px;
    left: 80px;
    right: auto;
    width: 2px;
    height: auto
  }

  body[data-page="nexcontrol.html"] .nc-process-track i {
    top: 0;
    left: 0;
    width: 100%;
    height: 16%;
    animation-name: nc-process-beam-vertical
  }
}

@keyframes nc-process-beam-vertical {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(525%)
  }
}

@media(max-width:600px) {
  body[data-page="nexcontrol.html"] .hero-visual img {
    height: 280px
  }

  body[data-page="nexcontrol.html"] .line {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 16px
  }

  body[data-page="nexcontrol.html"] .line>.num {
    width: 34px;
    height: 34px
  }

  body[data-page="nexcontrol.html"] .line>div:nth-of-type(2)>.dash {
    padding: 14px
  }

  body[data-page="nexcontrol.html"] .dash.big {
    padding: 14px;
    border-radius: 16px
  }

  body[data-page="nexcontrol.html"] .dash.big .kpi {
    padding: 12px 9px
  }

  body[data-page="nexcontrol.html"] .dash.big .dg {
    grid-template-columns: 1fr;
    gap: 10px
  }

  body[data-page="nexcontrol.html"] .nx .flow {
    flex-direction: column;
    gap: 8px
  }

  body[data-page="nexcontrol.html"] .nx .flow b {
    width: 100%;
    padding: 10px 8px;
    font-size: .9rem
  }

  body[data-page="nexcontrol.html"] .nx .flow span i {
    transform: none
  }

  body[data-page="nexcontrol.html"] .cards .c {
    min-height: 0;
    padding: 22px
  }
}

body[data-page="empresa.html"] .hero {
  min-height: 0;
  min-height: min(760px, 100svh);
  padding: 128px 0 72px
}

body[data-page="empresa.html"] .hero-visual {
  transform: none;
  border-radius: 20px;
  box-shadow: 0 24px 64px -38px rgba(15, 23, 42, .3)
}

body[data-page="empresa.html"] .hero-visual img {
  height: clamp(300px, 34vw, 390px)
}

body[data-page="empresa.html"] .hero-visual figcaption {
  border-top: 1px solid var(--b);
  background: var(--s)
}

body[data-page="empresa.html"] .hero h1 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 5.2vw, 4.4rem);
  line-height: .99;
  letter-spacing: -.055em
}

body[data-page="empresa.html"] .hero .lead {
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.65
}

body[data-page="empresa.html"] .hero .btns {
  margin-top: 30px
}

body[data-page="empresa.html"] .about-story,
body[data-page="empresa.html"] .about-values,
body[data-page="empresa.html"] .about-timeline {
  padding: clamp(64px, 7vw, 88px) 0
}

body[data-page="empresa.html"] .about-vision {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: clamp(40px, 8vw, 112px);
  align-items: center
}

body[data-page="empresa.html"] .about-vision-copy h2 {
  max-width: 12ch
}

body[data-page="empresa.html"] .about-vision-copy>p {
  max-width: 50ch;
  line-height: 1.75
}

body[data-page="empresa.html"] .about-vision-copy .about-vision-lead {
  margin: 20px 0 12px;
  color: var(--t);
  font-size: 1.16rem;
  line-height: 1.65
}

body[data-page="empresa.html"] .about-vision-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: var(--p);
  font-weight: 600
}

body[data-page="empresa.html"] .about-vision-link i,
body[data-page="empresa.html"] .about-product-link i {
  font-size: .82em;
  transition: transform .2s
}

body[data-page="empresa.html"] .about-vision-link:hover i,
body[data-page="empresa.html"] .about-product-link:hover i {
  transform: translateX(4px)
}

body[data-page="empresa.html"] .about-vision-scene {
  position: relative;
  min-height: 390px;
  isolation: isolate
}

body[data-page="empresa.html"] .about-vision-scene:before {
  position: absolute;
  z-index: -1;
  inset: 10% 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--p) 12%, transparent), transparent 68%);
  content: ""
}

body[data-page="empresa.html"] #company-scene {
  display: block;
  width: 100%;
  height: 390px
}

body[data-page="empresa.html"] .about-scene-caption {
  display: none
}

body[data-page="empresa.html"] .about-process {
  display: grid;
  grid-template-columns: .72fr 1.6fr;
  gap: 36px;
  align-items: start;
  margin-top: 70px;
  padding-top: 38px;
  border-top: 1px solid var(--b)
}

body[data-page="empresa.html"] .about-process-heading h3 {
  max-width: 12ch;
  font: 700 clamp(1.35rem, 2vw, 1.8rem)/1.25 Manrope;
  letter-spacing: -.035em
}

body[data-page="empresa.html"] .about-process-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none
}

body[data-page="empresa.html"] .about-process-list:before {
  position: absolute;
  top: 15px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--b);
  content: ""
}

body[data-page="empresa.html"] .about-process-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  min-width: 0
}

body[data-page="empresa.html"] .about-process-list li>span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid color-mix(in srgb, var(--p) 32%, var(--b));
  border-radius: 50%;
  background: var(--bg);
  color: var(--p);
  font: 700 .68rem Manrope
}

body[data-page="empresa.html"] .about-process-list h4 {
  font-size: .98rem
}

body[data-page="empresa.html"] .about-process-list p {
  margin-top: 6px;
  font-size: .88rem;
  line-height: 1.65
}

body[data-page="empresa.html"] .about-product {
  display: grid;
  grid-template-columns: .7fr 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 52px;
  padding: 24px 0;
  border-top: 1px solid var(--b);
  border-bottom: 1px solid var(--b)
}

body[data-page="empresa.html"] .about-product-label {
  display: block;
  margin-bottom: 3px;
  color: var(--p);
  font: 600 .68rem Manrope;
  letter-spacing: .13em;
  text-transform: uppercase
}

body[data-page="empresa.html"] .about-product h3 {
  font: 700 1.2rem Manrope
}

body[data-page="empresa.html"] .about-product>p {
  margin: 0;
  color: var(--m);
  font-size: .94rem;
  line-height: 1.6
}

body[data-page="empresa.html"] .about-product-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--p);
  font-weight: 600;
  white-space: nowrap
}

body[data-page="empresa.html"] .about-principles-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: start
}

body[data-page="empresa.html"] .about-section-heading {
  max-width: 420px
}

body[data-page="empresa.html"] .about-section-heading h2 {
  max-width: 12ch
}

body[data-page="empresa.html"] .about-section-heading p {
  margin-top: 14px;
  font-size: 1.02rem
}

body[data-page="empresa.html"] .about-value-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none
}

body[data-page="empresa.html"] .about-value-list {
  gap: 14px
}

body[data-page="empresa.html"] .about-value-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 14px;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 21px;
  border: 1px solid var(--b);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--s), color-mix(in srgb, var(--p) 3%, var(--bg)));
  transition: transform .25s, border-color .25s, box-shadow .25s
}

body[data-page="empresa.html"] .about-value-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--p) 42%, var(--b));
  box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--p) 58%, transparent)
}

body[data-page="empresa.html"] .about-value-icon {
  grid-row: 1/3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--p) 15%, var(--b));
  border-radius: 12px;
  background: color-mix(in srgb, var(--p) 9%, var(--bg));
  color: var(--p);
  font-size: 1rem
}

body[data-page="empresa.html"] .about-value-card h3 {
  align-self: center;
  font: 700 1rem/1.35 Manrope
}

body[data-page="empresa.html"] .about-value-card p {
  grid-column: 2;
  margin: 3px 0 0;
  color: var(--m);
  font-size: .86rem;
  line-height: 1.65
}

body[data-page="empresa.html"] .about-timeline .w {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start
}

body[data-page="empresa.html"] .about-timeline-heading {
  max-width: 420px
}

body[data-page="empresa.html"] .about-timeline-heading h2 {
  max-width: 13ch
}

body[data-page="empresa.html"] .about-timeline-heading p {
  margin-top: 14px;
  max-width: 40ch
}

body[data-page="empresa.html"] .about-cta {
  min-height: 360px;
  display: grid;
  place-items: center
}

body[data-page="empresa.html"] .about-cta:before {
  background: rgba(13, 15, 17, .62)
}

body[data-page="empresa.html"] .about-cta-bg {
  position: absolute;
  z-index: -2;
  inset: -45% 0;
  background: url("../assets/images/bac-image.png") center 48%/cover no-repeat;
  will-change: transform
}

body[data-page="empresa.html"] .about-cta .w {
  padding: 32px 0
}

body[data-page="empresa.html"] .hist {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none
}

body[data-page="empresa.html"] .hist:before {
  position: absolute;
  top: 10px;
  left: 8px;
  right: 8px;
  height: 1px;
  background: var(--b);
  content: ""
}

body[data-page="empresa.html"] .hist li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0
}

body[data-page="empresa.html"] .hist-step {
  grid-row: 1/3;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--p);
  color: transparent;
  font-size: 0
}

body[data-page="empresa.html"] .hist li:before {
  display: none
}

body[data-page="empresa.html"] .hist li h3,
body[data-page="empresa.html"] .hist li p {
  grid-column: 1
}

body[data-page="empresa.html"] .hist li h3 {
  font-size: .98rem;
  line-height: 1.35
}

body[data-page="empresa.html"] .hist li p {
  margin-top: 7px;
  font-size: .88rem;
  line-height: 1.65
}

@media(max-width:900px) {
  body[data-page="empresa.html"] .hero {
    min-height: 0;
    padding: 116px 0 58px
  }

  body[data-page="empresa.html"] .hero h1 {
    max-width: 13ch;
    font-size: clamp(2.55rem, 7vw, 3.6rem)
  }

  body[data-page="empresa.html"] .about-vision {
    grid-template-columns: 1fr;
    gap: 22px
  }

  body[data-page="empresa.html"] .about-vision-copy h2 {
    max-width: 17ch
  }

  body[data-page="empresa.html"] .about-vision-scene {
    min-height: 320px
  }

  body[data-page="empresa.html"] #company-scene {
    height: 320px
  }

  body[data-page="empresa.html"] .about-process {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 42px;
    padding-top: 30px
  }

  body[data-page="empresa.html"] .about-process-heading h3 {
    max-width: none
  }

  body[data-page="empresa.html"] .about-principles-layout,
  body[data-page="empresa.html"] .about-timeline .w {
    grid-template-columns: 1fr;
    gap: 30px
  }

  body[data-page="empresa.html"] .about-section-heading,
  body[data-page="empresa.html"] .about-timeline-heading {
    max-width: 600px
  }

  body[data-page="empresa.html"] .hist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px
  }

  body[data-page="empresa.html"] .hist:before {
    display: none
  }
}

@media(max-width:600px) {
  body[data-page="empresa.html"] .hero {
    padding: 108px 0 48px
  }

  body[data-page="empresa.html"] .hero .w.has-media {
    gap: 28px
  }

  body[data-page="empresa.html"] .hero h1 {
    max-width: 12ch;
    font-size: clamp(2.25rem, 9vw, 2.8rem)
  }

  body[data-page="empresa.html"] .hero .lead {
    margin-top: 18px;
    font-size: 1rem
  }

  body[data-page="empresa.html"] .hero-visual img {
    height: 260px
  }

  body[data-page="empresa.html"] .about-story,
  body[data-page="empresa.html"] .about-values,
  body[data-page="empresa.html"] .about-timeline {
    padding: 56px 0
  }

  body[data-page="empresa.html"] .about-vision-copy .about-vision-lead {
    font-size: 1.06rem
  }

  body[data-page="empresa.html"] .about-vision-scene {
    min-height: 250px
  }

  body[data-page="empresa.html"] #company-scene {
    height: 250px
  }

  body[data-page="empresa.html"] .about-scene-caption {
    font-size: .68rem
  }

  body[data-page="empresa.html"] .about-process-list {
    grid-template-columns: 1fr;
    gap: 18px
  }

  body[data-page="empresa.html"] .about-process-list:before {
    top: 12px;
    bottom: 12px;
    left: 15px;
    right: auto;
    width: 1px;
    height: auto
  }

  body[data-page="empresa.html"] .about-process-list li {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 0 14px;
    align-items: start
  }

  body[data-page="empresa.html"] .about-process-list li>span {
    grid-row: 1/3
  }

  body[data-page="empresa.html"] .about-process-list p {
    margin-top: 5px
  }

  body[data-page="empresa.html"] .about-product {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 32px;
    padding: 20px 0
  }

  body[data-page="empresa.html"] .about-product-link {
    margin-top: 5px
  }

  body[data-page="empresa.html"] .about-value-list {
    grid-template-columns: 1fr;
    column-gap: 0
  }

  body[data-page="empresa.html"] .about-value-card {
    padding: 18px
  }

  body[data-page="empresa.html"] .about-timeline .w {
    gap: 24px
  }

  body[data-page="empresa.html"] .hist {
    grid-template-columns: 1fr;
    gap: 0
  }

  body[data-page="empresa.html"] .hist:before {
    top: 7px;
    bottom: 20px;
    left: 7px;
    right: auto;
    width: 1px;
    height: auto
  }

  body[data-page="empresa.html"] .hist li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 12px;
    padding-bottom: 22px
  }

  body[data-page="empresa.html"] .hist li h3,
  body[data-page="empresa.html"] .hist li p {
    grid-column: 2
  }

  body[data-page="empresa.html"] .hist-step {
    grid-row: 1/3;
    margin-top: 3px
  }

  body[data-page="empresa.html"] .hist li p {
    margin-top: 6px
  }
}

.form~aside li .fa-brands,
.form~aside li .fa-solid {
  width: 1.3em;
  color: var(--p)
}

.hist li {
  padding: 0 0 32px 28px;
  border-left: 2px solid var(--b);
  position: relative
}

.hist li:before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--p);
  border-radius: 50%
}

.form {
  display: grid;
  gap: 18px
}

.form label {
  font-weight: 600;
  font-size: .9rem;
  display: grid;
  gap: 6px
}

.form input,
.form select,
.form textarea {
  font: inherit;
  padding: 13px 14px;
  border: 1px solid var(--b);
  border-radius: 8px;
  background: var(--s);
  color: var(--t);
  transition: border-color .3s, box-shadow .3s
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 0;
  border-color: var(--p);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 25%, transparent)
}

.form input:user-invalid {
  border-color: #DC2626
}

.form[data-s=loading] .btn {
  opacity: .6;
  pointer-events: none
}

.msg {
  min-height: 1.5em;
  font-weight: 600
}

.form[data-s=success] .msg {
  color: #16A34A
}

.form[data-s=error] .msg {
  color: #DC2626
}

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

body[data-page="contato.html"] .hero {
  min-height: 0;
  min-height: min(760px, 100svh);
  padding: 132px 0 78px
}

body[data-page="contato.html"] .hero h1 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 5.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.055em
}

body[data-page="contato.html"] .hero .lead {
  max-width: 44ch;
  font-size: clamp(1.04rem, 1.35vw, 1.18rem);
  line-height: 1.7
}

body[data-page="contato.html"] .hero .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px
}

body[data-page="contato.html"] .hero .btns .btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px
}

body[data-page="contato.html"] .hero-visual {
  transform: none;
  border-radius: 20px;
  box-shadow: 0 24px 64px -38px rgba(15, 23, 42, .38)
}

body[data-page="contato.html"] .hero-visual img {
  height: clamp(300px, 35vw, 410px)
}

body[data-page="contato.html"] .contact-section {
  padding: 8px 0 clamp(72px, 9vw, 112px)
}

body[data-page="contato.html"] .contact-layout {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: stretch
}

body[data-page="contato.html"] .contact-form {
  gap: 20px;
  padding: clamp(22px, 3.5vw, 38px);
  border: 1px solid var(--b);
  border-radius: 20px;
  background: var(--s);
  box-shadow: 0 22px 54px -42px rgba(15, 23, 42, .35)
}

body[data-page="contato.html"] .contact-form-heading {
  margin-bottom: 2px
}

body[data-page="contato.html"] .contact-form-heading .eyebrow {
  font-size: .7rem
}

body[data-page="contato.html"] .contact-form-heading h2 {
  margin-top: 5px;
  font: 700 clamp(1.45rem, 2.4vw, 2rem)/1.2 Manrope;
  letter-spacing: -.04em
}

body[data-page="contato.html"] .contact-form-heading p {
  margin-top: 8px;
  color: var(--m);
  font-size: .91rem;
  line-height: 1.6
}

body[data-page="contato.html"] .contact-form label {
  grid-template-columns: auto 1fr;
  justify-content: start;
  align-items: baseline;
  gap: 0 5px;
  font-size: .84rem
}

body[data-page="contato.html"] .contact-form label input,
body[data-page="contato.html"] .contact-form label select,
body[data-page="contato.html"] .contact-form label textarea {
  grid-column: 1/-1;
  width: 100%;
  margin-top: 7px
}

body[data-page="contato.html"] .contact-form input,
body[data-page="contato.html"] .contact-form select,
body[data-page="contato.html"] .contact-form textarea {
  min-height: 49px;
  padding: 13px 14px;
  border-radius: 10px;
  font-size: .92rem
}

body[data-page="contato.html"] .contact-form textarea {
  min-height: 142px;
  resize: vertical
}

body[data-page="contato.html"] .contact-form input::placeholder,
body[data-page="contato.html"] .contact-form textarea::placeholder {
  color: color-mix(in srgb, var(--m) 72%, transparent);
  font-size: .86rem
}

body[data-page="contato.html"] .required-mark {
  color: #dc4a4a
}

body[data-page="contato.html"] .optional-mark {
  color: var(--m);
  font-size: .72rem;
  font-weight: 400
}

body[data-page="contato.html"] .contact-form-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: -3px 0 -8px;
  color: var(--m);
  font-size: .78rem;
  line-height: 1.5
}

body[data-page="contato.html"] .contact-form-note i {
  margin-top: 3px;
  color: var(--p)
}

body[data-page="contato.html"] .contact-form>.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 10px
}

body[data-page="contato.html"] .contact-form>.btn i {
  transition: transform .2s
}

body[data-page="contato.html"] .contact-form>.btn:hover i {
  transform: translateX(4px)
}

body[data-page="contato.html"] .contact-form .msg {
  margin: 0;
  font-size: .84rem
}

body[data-page="contato.html"] .contact-form[data-s=ready] .msg {
  color: var(--p)
}

body[data-page="contato.html"] .contact-aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin-top: 24px;
  padding: clamp(24px, 3.5vw, 38px);
  border: 1px solid #45443f;
  border-radius: 20px;
  background: linear-gradient(150deg, #292824, #191a18 78%);
  color: #f8fafc
}

body[data-page="contato.html"] .contact-aside-orb {
  position: absolute;
  z-index: -1;
  top: -95px;
  right: -100px;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190, 174, 139, .13), transparent 70%)
}

body[data-page="contato.html"] .contact-aside .eyebrow {
  color: #83b4ff;
  font-size: .7rem
}

body[data-page="contato.html"] .contact-aside h2 {
  max-width: 13ch;
  margin-top: 9px;
  font: 700 clamp(1.65rem, 2.8vw, 2.25rem)/1.13 Manrope;
  letter-spacing: -.04em
}

body[data-page="contato.html"] .contact-aside>p {
  margin-top: 14px;
  color: #c0cde0;
  font-size: .93rem;
  line-height: 1.72
}

body[data-page="contato.html"] .contact-aside-links {
  display: grid;
  gap: 10px;
  margin-top: 28px
}

body[data-page="contato.html"] .contact-channel {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(173, 198, 231, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: #f8fafc;
  transition: background .2s, border-color .2s, transform .2s
}

body[data-page="contato.html"] .contact-channel:hover {
  transform: translateY(-2px);
  border-color: rgba(130, 180, 255, .55);
  background: rgba(255, 255, 255, .09)
}

body[data-page="contato.html"] .contact-channel-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(78, 137, 225, .18);
  color: #8ebaff;
  font-size: 1rem
}

body[data-page="contato.html"] .contact-channel>span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0
}

body[data-page="contato.html"] .contact-channel small {
  color: #9fb2cc;
  font-size: .7rem
}

body[data-page="contato.html"] .contact-channel strong {
  overflow-wrap: anywhere;
  font-size: .85rem;
  font-weight: 600
}

body[data-page="contato.html"] .contact-channel-arrow {
  color: #7fa9df;
  font-size: .72rem
}

body[data-page="contato.html"] .contact-location {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
  color: #dae5f4;
  font-size: .86rem;
  line-height: 1.55
}

body[data-page="contato.html"] .contact-location>i {
  margin-top: 3px;
  color: #8ebaff
}

body[data-page="contato.html"] .contact-location small {
  color: #9fb2cc;
  font-size: .77rem
}

body[data-page="contato.html"] .contact-whatsapp-float {
  position: fixed;
  z-index: 45;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 30px);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background: #e5e7eb;
  color: #168653;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .2);
  transition: transform .2s, background .2s, box-shadow .2s
}

body[data-page="contato.html"] .contact-whatsapp-float:hover {
  transform: translateY(-3px);
  background: #d1d5db;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .24)
}

body[data-page="contato.html"] .contact-whatsapp-float:focus-visible {
  outline: 3px solid var(--p);
  outline-offset: 4px
}

body[data-page="contato.html"] .contact-whatsapp-float i {
  font-size: 1.8rem
}

body[data-page="contato.html"] .contact-whatsapp-float span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

body[data-page="nexcontrol.html"] .nc-feature-list .line {
  grid-template-columns: minmax(190px, .78fr) minmax(0, 1.22fr)
}

footer {
  background: #242522;
  color: #f1efe9;
  padding: 72px 0 28px;
  border-top: 1px solid #393a35
}

[data-theme=dark] footer {
  background: #1c1d1a;
  color: #f1efe9;
  border-top-color: #33342f
}

footer p,
footer a {
  color: #b7b6ad
}

footer .logo,
footer .logo:hover {
  color: #fff
}

[data-theme=dark] footer p,
[data-theme=dark] footer a {
  color: #aaa99f
}

[data-theme=dark] footer .logo,
[data-theme=dark] footer .logo:hover {
  color: #fff
}

footer a:hover {
  color: var(--p)
}

.fg {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px
}

.fg h3 {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: #f1efe9
}

[data-theme=dark] .fg h3 {
  color: #f1efe9
}

.fg li {
  margin-bottom: 8px;
  color: #b7b6ad
}

[data-theme=dark] .fg li {
  color: #aaa99f
}

.cp {
  border-top: 1px solid #393a35;
  margin-top: 56px;
  padding-top: 24px;
  font-size: .85rem
}

[data-theme=dark] .cp {
  border-top-color: #3a3a35
}

@media(max-width:900px) {

  nav,
  .hr .btn {
    display: none
  }

  .bg {
    display: block
  }

  section {
    padding: 64px 0
  }

  .split,
  .svc,
  .dg {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .hero .w.has-media {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .hero-visual {
    max-width: 620px;
    transform: none
  }

  .line {
    grid-template-columns: 48px 1fr;
    align-items: start
  }

  .line>:last-child {
    grid-column: 2
  }

  .tl {
    grid-template-columns: 1fr;
    gap: 0
  }

  .track {
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
    height: auto;
    right: auto
  }

  .bar {
    display: none
  }

  .flow {
    flex-direction: column;
    align-items: stretch
  }

  .flow b {
    text-align: center
  }

  .flow span {
    align-self: center;
    line-height: 1
  }

  .flow span i {
    transform: rotate(90deg)
  }

  .step {
    padding: 0 0 28px 36px
  }

  .step:before {
    top: 4px
  }

  .diagnosis-heading {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .diagnosis-heading .lead {
    margin: 0
  }

  .ba {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 44px
  }

  .core {
    justify-self: center;
    width: 150px;
    grid-row: 2
  }

  .ba-a {
    grid-row: 3
  }

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

  .fg>:first-child {
    grid-column: 1/-1
  }

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

  .diff-heading {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .diff-heading .lead {
    justify-self: start
  }

  .diff {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

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

  .btn {
    width: 100%
  }

  .svc dl {
    grid-template-columns: 1fr
  }
}

@media(max-width:900px) {
  body[data-page="contato.html"] .hero {
    min-height: 0;
    padding: 116px 0 58px
  }

  body[data-page="contato.html"] .hero h1 {
    max-width: 14ch;
    font-size: clamp(2.55rem, 7vw, 3.7rem)
  }

  body[data-page="contato.html"] .hero-visual {
    width: 100%;
    max-width: none
  }

  body[data-page="contato.html"] .hero-visual img {
    height: clamp(260px, 48vw, 360px)
  }

  body[data-page="contato.html"] .contact-section {
    padding: 8px 0 72px
  }

  body[data-page="contato.html"] .contact-layout {
    grid-template-columns: 1fr;
    gap: 22px
  }

  body[data-page="contato.html"] .contact-aside {
    min-height: 0
  }

  body[data-page="contato.html"] .contact-location {
    margin-top: 28px
  }
}

@media(max-width:600px) {
  body[data-page="contato.html"] .hero {
    padding: 108px 0 48px
  }

  body[data-page="contato.html"] .hero h1 {
    max-width: 12ch;
    font-size: clamp(2.25rem, 9vw, 2.9rem)
  }

  body[data-page="contato.html"] .hero .lead {
    font-size: 1rem
  }

  body[data-page="contato.html"] .hero .btns {
    display: grid;
    grid-template-columns: 1fr
  }

  body[data-page="contato.html"] .hero .btns .btn {
    width: 100%;
    justify-content: center
  }

  body[data-page="contato.html"] .hero-visual img {
    height: 250px
  }

  body[data-page="contato.html"] .contact-form {
    gap: 17px;
    padding: 21px 17px;
    border-radius: 16px
  }

  body[data-page="contato.html"] .contact-form-heading h2 {
    font-size: 1.5rem
  }

  body[data-page="contato.html"] .contact-aside {
    padding: 24px 20px;
    border-radius: 16px
  }

  body[data-page="contato.html"] .contact-channel {
    grid-template-columns: 38px minmax(0, 1fr) 14px;
    gap: 10px;
    padding: 10px
  }
}

@media(max-width:900px) {
  body[data-page="nexcontrol.html"] .nc-feature-list .line {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 18px
  }

  body[data-page="nexcontrol.html"] .nc-feature-list .line>:last-child {
    grid-column: 1
  }

  body[data-page="nexcontrol.html"] .nc-process-steps li {
    grid-template-columns: 42px minmax(0, 1fr)
  }

  body[data-page="nexcontrol.html"] .nc-process-steps .nc-step-icon {
    grid-row: 1;
    grid-column: 1
  }

  body[data-page="nexcontrol.html"] .nc-process-steps strong {
    grid-row: 1;
    grid-column: 2
  }

  body[data-page="nexcontrol.html"] .nc-process-track {
    left: 54px
  }
}

@media(max-width:600px) {
  .diff {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .diff-card {
    min-height: 0;
    padding: 20px
  }

  footer {
    padding: 44px 0 20px
  }

  .fg {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 14px
  }

  .fg>:first-child {
    grid-column: 1;
    padding: 0;
    border: 0
  }

  .fg>:first-child p {
    margin: 9px 0 0 !important;
    font-size: .86rem
  }

  .fg>.footer-brand {
    padding: 0;
    border: 0
  }

  .fg>.footer-brand p,
  .fg>.footer-nav,
  .fg>.footer-tech,
  .footer-social h3,
  .footer-social li span {
    display: none
  }

  .fg>.footer-social {
    grid-column: 2;
    justify-self: end
  }

  .fg>.footer-social ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px
  }

  .fg>.footer-social li {
    margin: 0
  }

  .fg>.footer-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #4b4c46;
    border-radius: 50%;
    color: #d8d6ce;
    font-size: 1rem;
    transition: color .2s, border-color .2s, background .2s
  }

  .fg>.footer-social a:hover {
    border-color: var(--p);
    background: rgba(255,255,255,.06);
    color: #fff
  }

  .footer-brand>p:last-of-type,
  .footer-tech,
  .footer-nav li:nth-child(3),
  .footer-nav li:nth-child(4) {
    display: none
  }

  .fg h3 {
    margin-bottom: 10px;
    font-size: .69rem;
    letter-spacing: .1em
  }

  .fg li {
    margin-bottom: 5px;
    font-size: .88rem
  }

  .cp {
    margin-top: 22px;
    padding-top: 16px;
    font-size: .76rem
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important
  }
}

@media(max-width:600px) {
  .fg>.footer-brand {
    grid-column: 1
  }

  .fg>.footer-social {
    grid-column: 2
  }
}

body[data-page="portfolio.html"] .portfolio-hero {
  position: relative;
  isolation: isolate;
  min-height: 68svh;
  padding: 150px 0 90px;
  overflow: hidden;
  background: #292a26;
  color: #fff
}

body[data-page="portfolio.html"] .portfolio-hero:before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(19, 18, 15, .56) 0%, rgba(19, 18, 15, .48) 48%, rgba(19, 18, 15, .4) 100%)
}

body[data-page="portfolio.html"] .portfolio-background-video {
  position: absolute;
  z-index: 0;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
  filter: blur(5px) brightness(.58) saturate(.76);
  pointer-events: none
}

body[data-page="portfolio.html"] #portfolio-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .82;
  pointer-events: none
}

body[data-page="portfolio.html"] .portfolio-hero .grid-bg {
  display: none
}

body[data-page="portfolio.html"] .portfolio-hero .w {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

body[data-page="portfolio.html"] .portfolio-hero .eyebrow {
  color: #bfdbfe
}

body[data-page="portfolio.html"] .portfolio-hero h1 {
  max-width: 15ch;
  margin: 0 auto
}

body[data-page="portfolio.html"] .portfolio-hero .lead {
  max-width: 58ch;
  margin: 24px auto 0;
  color: #e2e8f0
}

body[data-page="portfolio.html"] .portfolio-section {
  padding-top: 34px;
  scroll-margin-top: 90px
}

body[data-page="portfolio.html"] .portfolio-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 38px
}

body[data-page="portfolio.html"] .portfolio-heading .eyebrow {
  margin-bottom: 14px
}

body[data-page="portfolio.html"] .portfolio-heading h2 {
  max-width: 16ch
}

body[data-page="portfolio.html"] .portfolio-heading>p {
  max-width: 38ch;
  margin-bottom: 5px
}

body[data-page="portfolio.html"] .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px
}

body[data-page="portfolio.html"] .portfolio-card {
  overflow: hidden;
  border: 1px solid var(--b);
  border-radius: 14px;
  background: var(--s);
  box-shadow: 0 10px 32px -26px rgba(15, 23, 42, .34);
  transition: transform .3s, border-color .3s, box-shadow .3s
}

body[data-page="portfolio.html"] .portfolio-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--p) 52%, var(--b));
  box-shadow: 0 22px 44px -30px rgba(15, 23, 42, .4)
}

body[data-page="portfolio.html"] .portfolio-image {
  position: relative;
  display: block;
  aspect-ratio: 1.48;
  overflow: hidden;
  background: #d8d7d1
}

body[data-page="portfolio.html"] .portfolio-image:after {
  position: absolute;
  inset: 35% 0 0;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(10, 12, 14, .68))
}

body[data-page="portfolio.html"] .portfolio-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s
}

body[data-page="portfolio.html"] .portfolio-card:hover .portfolio-image img {
  transform: scale(1.045)
}

body[data-page="portfolio.html"] .portfolio-image-label {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 52px;
  bottom: 17px;
  color: #fff;
  font: 600 .9rem/1.4 Manrope;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .24)
}

body[data-page="portfolio.html"] .portfolio-image-action {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(15, 23, 42, .28);
  color: #fff;
  font-size: .78rem;
  backdrop-filter: blur(8px);
  transition: background .2s, transform .2s
}

body[data-page="portfolio.html"] .portfolio-card:hover .portfolio-image-action {
  transform: translate(2px, -2px);
  background: var(--p);
  border-color: var(--p)
}

body[data-page="portfolio.html"] .portfolio-image-fashion img {
  object-position: center 36%
}

body[data-page="portfolio.html"] .portfolio-image-dental img {
  object-position: center 42%
}

body[data-page="portfolio.html"] .portfolio-image-gym img {
  object-position: center 52%
}

body[data-page="portfolio.html"] .portfolio-image-cars img {
  object-position: center 54%
}

body[data-page="portfolio.html"] .portfolio-image-furniture img {
  object-position: center 50%
}

body[data-page="portfolio.html"] .portfolio-card-copy {
  padding: 22px 22px 21px
}

body[data-page="portfolio.html"] .portfolio-category {
  color: var(--p);
  font: 700 .68rem Manrope;
  letter-spacing: .12em;
  text-transform: uppercase
}

body[data-page="portfolio.html"] .portfolio-card-copy h3 {
  margin-top: 8px;
  font-size: 1.14rem;
  line-height: 1.3
}

body[data-page="portfolio.html"] .portfolio-card-copy p {
  min-height: 3.2em;
  margin-top: 9px;
  font-size: .91rem;
  line-height: 1.62
}

body[data-page="portfolio.html"] .portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: var(--p);
  font-size: .87rem;
  font-weight: 700
}

body[data-page="portfolio.html"] .portfolio-link i {
  font-size: .73rem;
  transition: transform .2s
}

body[data-page="portfolio.html"] .portfolio-link:hover i {
  transform: translate(2px, -2px)
}

body[data-page="portfolio.html"] .portfolio-cta .eyebrow {
  color: #bfdbfe
}

body[data-page="portfolio.html"] .portfolio-cta h2 {
  max-width: 17ch
}

body[data-page="portfolio.html"] .portfolio-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

@media(max-width:900px) {
  body[data-page="portfolio.html"] .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  body[data-page="portfolio.html"] .portfolio-heading {
    align-items: start;
    flex-direction: column;
    gap: 16px
  }

  body[data-page="portfolio.html"] .portfolio-heading>p {
    max-width: 54ch
  }
}

@media(max-width:600px) {
  body[data-page="portfolio.html"] .portfolio-hero {
    min-height: 65svh;
    padding: 120px 0 54px
  }

  body[data-page="portfolio.html"] .portfolio-hero:before {
    background: radial-gradient(ellipse at center, rgba(19, 18, 15, .66), rgba(19, 18, 15, .54))
  }

  body[data-page="portfolio.html"] #portfolio-scene {
    opacity: .64
  }

  body[data-page="portfolio.html"] .portfolio-hero h1 {
    max-width: 12ch
  }

  body[data-page="portfolio.html"] .portfolio-section {
    padding-top: 20px
  }

  body[data-page="portfolio.html"] .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 17px
  }

  body[data-page="portfolio.html"] .portfolio-heading {
    margin-bottom: 28px
  }

  body[data-page="portfolio.html"] .portfolio-image {
    aspect-ratio: 1.55
  }

  body[data-page="portfolio.html"] .portfolio-card-copy p {
    min-height: 0
  }

  body[data-page="portfolio.html"] .portfolio-cta .btn {
    width: auto
  }
}