:root {
  --blue: #061b47;
  --mid: #020814;
  --deep: #010713;
  --cyan: #00c8ff;
  --cyan2: #16a3ff;
  --white: #ffffff;
  --muted: #b8c4da;
  --line: rgba(255, 255, 255, .16);
  --soft: #f6f8fc;
  --ink: #071a44;
  --header-height: 96px;
  --header-height-scrolled: 72px;
  --anchor-offset: 112px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset)
}

[id] {
  scroll-margin-top: var(--anchor-offset)
}

body {
  margin: 0;
  background: var(--deep);
  color: var(--white)
}

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

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

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 99;
  background: #fff;
  color: #000;
  padding: 8px
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4vw;
  border-bottom: 1px solid var(--line);
  background: rgba(2, 8, 20, .72);
  backdrop-filter: blur(18px);
  transition: min-height .28s ease, padding .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.site-header.scrolled {
  min-height: var(--header-height-scrolled);
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(2, 8, 20, .88);
  border-bottom-color: rgba(255, 255, 255, .22);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .28)
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600
}

.brand img {
  width: 82px;
  height: auto;
  transition: width .28s ease, transform .28s ease
}

.site-header.scrolled .brand img {
  width: 68px
}

.brand span {
  line-height: 1.25;
  color: #f3f7ff;
  transition: opacity .28s ease
}

.site-header.scrolled .brand span {
  opacity: .82
}

.main-nav {
  display: flex;
  gap: 26px;
  align-items: center;
  font-size: 14px
}

.main-nav a {
  opacity: .92
}

.main-nav a:hover {
  color: var(--cyan)
}

.nav-cta {
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  padding: 12px 22px
}

.nav-toggle {
  display: none;
  background: none;
  color: white;
  border: 0;
  font-size: 28px
}

.hero,
.ray-field {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 68% 46%, rgba(0, 210, 255, .46) 0 .4%, rgba(0, 140, 255, .28) 2.2%, rgba(0, 65, 160, .18) 10%, rgba(2, 8, 20, 0) 29%), linear-gradient(112deg, #020814 0%, #061846 58%, #020814 100%)
}

.hero:before,
.ray-field:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .9;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='g'%3E%3CfeGaussianBlur stdDeviation='.18' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id='c' x1='0' x2='1'%3E%3Cstop stop-color='%2300d8ff' stop-opacity='.08'/%3E%3Cstop offset='.82' stop-color='%2300d8ff' stop-opacity='.88'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.92'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop stop-color='%231d62ff' stop-opacity='.06'/%3E%3Cstop offset='.78' stop-color='%231da7ff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.9'/%3E%3C/linearGradient%3E%3ClinearGradient id='p' x1='0' x2='1'%3E%3Cstop stop-color='%23ff7cff' stop-opacity='.03'/%3E%3Cstop offset='.82' stop-color='%23ff7cff' stop-opacity='.52'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.75'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg filter='url(%23g)' stroke-linecap='round'%3E%3Cline x1='68' y1='46' x2='0' y2='17' stroke='url(%23c)' stroke-width='.38'/%3E%3Cline x1='68' y1='46' x2='0' y2='43' stroke='url(%23b)' stroke-width='.23'/%3E%3Cline x1='68' y1='46' x2='0' y2='71' stroke='url(%23p)' stroke-width='.18'/%3E%3Cline x1='68' y1='46' x2='18' y2='100' stroke='url(%23b)' stroke-width='.22'/%3E%3Cline x1='68' y1='46' x2='44' y2='100' stroke='url(%23c)' stroke-width='.34'/%3E%3Cline x1='68' y1='46' x2='77' y2='100' stroke='url(%23b)' stroke-width='.22'/%3E%3Cline x1='68' y1='46' x2='100' y2='22' stroke='url(%23b)' stroke-width='.18'/%3E%3Cline x1='68' y1='46' x2='100' y2='47' stroke='url(%23c)' stroke-width='.31'/%3E%3Cline x1='68' y1='46' x2='100' y2='75' stroke='url(%23b)' stroke-width='.18'/%3E%3C/g%3E%3C/svg%3E")
}

.hero:after,
.ray-field:after {
  content: "";
  position: absolute;
  left: 68%;
  top: 46%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 0 12px #fff, 0 0 34px var(--cyan), 0 0 80px #126eff
}

.hero {
  min-height: 92vh;
  display: flex;
  align-items: center
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(760px, 90vw);
  padding-left: 4vw;
  padding-top: 80px
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyan);
  font-weight: 800;
  font-size: 12px
}

.hero h1 {
  font-size: clamp(52px, 7vw, 104px);
  line-height: .98;
  margin: 12px 0 28px
}

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

.lead {
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.45;
  color: #e2e8f6;
  max-width: 610px
}

.actions {
  display: flex;
  gap: 20px;
  margin-top: 34px
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 16px 24px;
  font-weight: 800;
  border: 1px solid var(--line);
  transition: .25s
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 200, 255, .25)
}

.primary {
  background: linear-gradient(135deg, #008cff, #00c8ff);
  color: #00122b
}

.secondary {
  background: rgba(255, 255, 255, .04)
}

.scroll-down {
  position: absolute;
  bottom: 36px;
  left: 50%;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 999px;
  width: 42px;
  height: 58px;
  display: grid;
  place-items: center
}

.service-wrap {
  position: relative;
  padding: 20px 4vw;
  background: radial-gradient(circle at 50% 48%, rgba(0, 210, 255, .36) 0 .35%, rgba(0, 140, 255, .22) 2.2%, rgba(0, 65, 160, .16) 10%, rgba(2, 8, 20, 0) 31%), linear-gradient(112deg, #020814 0%, #061846 58%, #020814 100%)
}

.service-wrap.ray-field:before {
  opacity: .64
}

.service-wrap.ray-field:after {
  left: 50%;
  top: 48%;
  width: 12px;
  height: 12px;
  opacity: .75
}

.service-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch
}

.service-card {
  min-height: 560px;
  position: relative;
  overflow: hidden;
  padding: 0;
  background-size: cover;
  background-position: center top;
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36);
  isolation: isolate
}

.service-card:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(2, 8, 20, .05) 0%, rgba(2, 8, 20, .10) 42%, rgba(2, 8, 20, .78) 69%, rgba(2, 8, 20, .96) 100%), linear-gradient(90deg, rgba(2, 8, 20, .58) 0%, rgba(2, 8, 20, .20) 55%, rgba(2, 8, 20, .08) 100%)
}

.service-card:after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 1;
  opacity: .08;
  background: radial-gradient(circle at 18% 18%, rgba(0, 200, 255, .35), transparent 34%);
  transition: .35s
}

.service-card:hover:after {
  opacity: .28
}

.consulting {
  background-image: url('../img/card-consulting.webp')
}

.sales {
  background-image: url('../img/card-sales.webp')
}

.biike {
  background-image: url('../img/card-biike.webp')
}

.card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  padding: 40px 36px 36px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.card-title {
  margin: 0 0 12px;
  color: var(--cyan) !important;
  font-weight: 900;
  letter-spacing: .005em;
  text-transform: none;
  font-size: clamp(22px, 2.15vw, 34px);
  line-height: 1.12;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .78)
}

.card-content h1,
.card-content h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(25px, 2.7vw, 40px);
  line-height: 1.12;
  max-width: 95%;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .68)
}

.card-content h1:after,
.card-content h2:after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin-top: 22px;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 200, 255, .55)
}

.card-content p,
.card-content li {
  color: #e6edfb;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .78)
}

.card-content ul {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none
}

.card-content li {
  position: relative;
  padding-left: 18px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.62
}

.card-content li:before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-weight: 900
}

.text-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--cyan);
  font-weight: 800
}

.text-link.dark {
  color: #005bd8
}

.numbers {
  background: var(--soft);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(700px, 3.2fr);
  align-items: center;
  gap: 48px;
  padding: 62px 4vw
}

.numbers .text-content {
  align-self: center
}

.numbers h2,
.process h2,
.contact h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  margin: 10px 0
}

.num-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  align-items: start;
  gap: 0;
  width: 100%
}

.num {
  position: relative;
  min-height: 166px;
  border-left: 1px solid #cfd8e8;
  padding: 0 24px 0 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center
}

.num:first-child {
  border-left: 0
}

.num:before {
  content: "";
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .98
}

.num:nth-child(1):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68' fill='none'%3E%3Crect x='17' y='20' width='34' height='31' rx='2' stroke='%23071A44' stroke-width='3'/%3E%3Cpath d='M17 30h34M25 15v10M43 15v10' stroke='%23071A44' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M25 37h4M32 37h4M39 37h4M25 44h4M32 44h4M39 44h4' stroke='%23071A44' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
}

.num:nth-child(2):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68' fill='none'%3E%3Crect x='14' y='26' width='40' height='27' rx='3' stroke='%23071A44' stroke-width='3'/%3E%3Cpath d='M26 26v-6h16v6M14 35h40' stroke='%23071A44' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M31 35h6v5h-6z' stroke='%23071A44' stroke-width='3'/%3E%3C/svg%3E")
}

.num:nth-child(3):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68' fill='none'%3E%3Ccircle cx='34' cy='23' r='7' stroke='%23071A44' stroke-width='3'/%3E%3Cpath d='M22 51v-4c0-8 5-14 12-14s12 6 12 14v4' stroke='%23071A44' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='30' r='6' stroke='%23071A44' stroke-width='3'/%3E%3Cpath d='M8 52v-3c0-7 4-12 10-12' stroke='%23071A44' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='30' r='6' stroke='%23071A44' stroke-width='3'/%3E%3Cpath d='M60 52v-3c0-7-4-12-10-12' stroke='%23071A44' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
}

.num:nth-child(4):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68' fill='none'%3E%3Ccircle cx='34' cy='34' r='23' stroke='%23071A44' stroke-width='3'/%3E%3Cpath d='M21 17c6 3 10 6 11 11 1 4-4 6-2 10 2 3 8 2 10 7 1 3-2 6-4 10M45 15c-3 5-8 7-8 12 0 4 4 6 8 5 4-1 7 2 9 6M12 36c7-2 12-1 16 3' stroke='%23071A44' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
}

.num strong {
  display: block;
  font-size: clamp(36px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: 800
}

.num:first-child strong:before {
  display: block;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 7px;
  color: var(--ink);
  font-weight: 700
}

.num span {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink)
}

.process {
  padding: 70px 4vw;
  display: grid;
  grid-template-columns: 1.2fr 3fr;
  gap: 50px
}

.process:before {
  opacity: .35
}

.process-intro,
.steps {
  position: relative;
  z-index: 2
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px
}

.steps span {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  color: var(--cyan);
  font-weight: 900;
  box-shadow: 0 0 35px rgba(0, 200, 255, .25)
}

.steps h3 {
  text-transform: uppercase;
  color: var(--cyan)
}

.steps p {
  color: var(--muted)
}

.insights {
  background: var(--soft);
  color: var(--ink);
  padding: 56px 4vw
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px
}

.insight {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(6, 27, 71, .08);
  transition: .25s
}

.insight:hover {
  transform: translateY(-4px)
}

.insight img {
  width: 100%;
  height: 122px;
  object-fit: cover;
  display: block
}

.insight div {
  padding: 20px
}

.insight span {
  font-size: 11px;
  text-transform: uppercase;
  color: #006ee6;
  font-weight: 900
}

.insight h3 {
  font-size: 17px
}

.trust {
  padding: 60px 4vw;
  background: #031433
}

.trust h2 {
  font-size: 34px
}

.logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  align-items: center
}

.logos span {
  font-size: 24px;
  font-weight: 900;
  color: #e7edf9;
  opacity: .82
}

.contact {
  padding: 70px 4vw;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  background: var(--soft);
  color: var(--ink)
}

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

.contact-form label {
  display: grid;
  gap: 8px;
  font-weight: 800
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #ccd6e6;
  border-radius: 8px;
  padding: 14px;
  font: inherit
}

.site-footer {
  display: grid;
  grid-template-columns: 110px 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px 4vw;
  background: #020814;
  border-top: 1px solid var(--line);
  color: #dbe4f5
}

.site-footer img {
  width: 92px
}

.site-footer a {
  color: #dbe4f5
}

.subpage {
  padding: calc(var(--header-height) + 64px) 4vw 80px;
  min-height: 70vh
}

.subpage h1 {
  font-size: clamp(44px, 6vw, 82px)
}

.subpage p {
  max-width: 850px;
  color: #dbe4f5;
  font-size: 20px;
  line-height: 1.6
}

.simple-list {
  max-width: 900px;
  display: grid;
  gap: 16px
}

.simple-list li {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  padding: 18px;
  border-radius: 10px
}

@media(max-width:1200px) {
  .numbers {
    grid-template-columns: minmax(240px, .9fr) minmax(620px, 3fr);
    gap: 32px
  }

  .num {
    padding: 0 18px 0 24px
  }

  .service-card {
    min-height: 500px
  }

  .card-content {
    padding: 34px 28px 30px
  }

  .card-title {
    font-size: 24px
  }

  .card-content h1,
  .card-content h2 {
    font-size: 30px
  }
}

@media(max-width:1050px) {
  .insight-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .numbers {
    grid-template-columns: 1fr;
    align-items: start
  }

  .num-container {
    grid-template-columns: repeat(4, minmax(120px, 1fr))
  }

  .numbers .text-content {
    max-width: 520px
  }

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

  .service-card {
    min-height: 520px;
    background-position: center top
  }
}

@media(max-width:980px) {
  :root {
    --header-height: 82px;
    --header-height-scrolled: 68px;
    --anchor-offset: 96px
  }

  .nav-toggle {
    display: block
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #020814;
    display: none;
    flex-direction: column;
    padding: 22px
  }

  .main-nav.open {
    display: flex
  }

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

  .steps,
  .logos {
    grid-template-columns: 1fr 1fr
  }

  .site-footer {
    grid-template-columns: 1fr
  }

  .brand span {
    display: none
  }

  .hero-content {
    padding-top: 120px
  }

  .service-wrap {
    padding: 16px 5vw
  }
}

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

  .num-container {
    grid-template-columns: repeat(2, 1fr)
  }

  .num {
    border-left: 0;
    border-top: 1px solid #cfd8e8;
    padding: 24px 16px 0
  }

  .num:nth-child(-n+2) {
    border-top: 0
  }
}

@media(max-width:620px) {
  :root {
    --header-height: 76px;
    --header-height-scrolled: 64px;
    --anchor-offset: 88px
  }

  .steps,
  .insight-grid,
  .logos {
    grid-template-columns: 1fr
  }

  .actions {
    flex-direction: column
  }

  .site-header {
    padding: 12px 5vw
  }

  .brand img {
    width: 68px
  }

  .service-card {
    min-height: 480px
  }

  .card-content {
    padding: 30px 24px 28px
  }

  .card-title {
    font-size: 22px
  }

  .card-content h1,
  .card-content h2 {
    font-size: 28px
  }

  .service-wrap {
    padding: 14px
  }

  .num-container {
    grid-template-columns: 1fr
  }

  .num:nth-child(n) {
    border-top: 1px solid #cfd8e8
  }

  .num:first-child {
    border-top: 0
  }
}