:root {
  --ink: #0c0732;
  --navy: #05031f;
  --teal: #08c8c7;
  --purple: #873bda;
  --orange: #ff7a1a
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  background: #fff
}

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

.wrap {
  width: min(1330px, 90%);
  margin: auto
}

.hero {
  min-height: 905px;
  color: #fff;
  background: radial-gradient(circle at 70% 45%, #21104d 0, transparent 25%), radial-gradient(circle at 85% 55%, #431127 0, transparent 18%), #05031f;
  overflow: hidden
}

.nav {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.logo {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1.5px
}

.logo span {
  color: #15bdc4
}

.navlinks {
  display: flex;
  gap: 54px;
  font-size: 13px
}

.top-cta {
  display: inline-block;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(105deg, #ff842c, #aa2ada);
  padding: 13px 23px;
  font-weight: 700;
  font-size: 13px
}

.hero-body {
  height: 650px;
  display: flex;
  align-items: center
}

.hero-copy {
  width: 49%;
  z-index: 2
}

.eyebrow {
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 16px
}

.eyebrow i {
  display: inline-block;
  width: 63px;
  height: 2px;
  background: #8c38d5;
  vertical-align: middle;
  margin-left: 14px
}

.teal-text {
  color: var(--teal)
}

.purple-text {
  color: #7137c9
}

.center {
  text-align: center
}

.hero h1 {
  font-size: 62px;
  line-height: 1.08;
  letter-spacing: -2px;
  margin: 0 0 23px
}

.hero h1 span {
  background: linear-gradient(90deg, #9a42e2, #fe7028);
  -webkit-background-clip: text;
  color: transparent
}

.intro {
  font-size: 16px;
  line-height: 1.65;
  color: #f5f3ff
}

.availability {
  display: inline-block;
  margin: 20px 0 28px;
  padding: 11px 16px;
  background: linear-gradient(90deg, #1d173c, #251338);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  color: #ffd3a7
}

.availability b {
  color: #ff851d;
  margin-right: 9px
}

.actions {
  display: flex;
  gap: 18px
}

.actions a {
  height: 55px;
  min-width: 165px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  border-radius: 6px;
  font-weight: 700
}

.primary {
  background: linear-gradient(120deg, #02c9c5, #24a6d7)
}

.secondary {
  border: 1px solid #85819c
}

.actions b {
  font-size: 25px;
  font-weight: 400
}

.portrait-wrap {
  width: 51%;
  height: 600px;
  position: relative
}

.slashes {
  position: absolute;
  width: 520px;
  height: 80px;
  transform: rotate(-35deg);
  filter: drop-shadow(0 0 8px currentColor)
}

.slashes:before,
.slashes:after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, currentColor 0 4px, transparent 4px 10px);
  clip-path: polygon(0 38%, 100% 0, 85% 58%, 4% 100%)
}

.teal-slash {
  color: #06d0ca;
  top: 270px;
  left: 10px
}

.orange-slash {
  color: #ff7415;
  top: 390px;
  left: 265px;
  width: 350px
}

.portrait {
  position: absolute;
  top: 60px;
  left: 100px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: #c4c5c5;
  border: 2px solid var(--teal);
  box-shadow: 3px 2px 0 #a22cdc;
  overflow: hidden
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block
}

.spark {
  position: absolute;
  color: #7b2bd1;
  font-size: 28px
}

.s1 {
  top: 55px;
  left: 80px
}

.s2 {
  top: 265px;
  left: 0
}

.s3 {
  top: 75px;
  right: 10px;
  color: #00bdbd
}

.facts {
  height: 165px;
  border-top: 1px solid #29253f;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center
}

.facts>div {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  border-right: 1px solid #39344d;
  min-height: 80px
}

.facts>div:last-child {
  border: 0
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--teal)
}

.facts .icon {
  font-size: 28px
}

.facts p {
  margin: 0
}

.facts b,
.facts span {
  display: block;
  font-size: 12px;
  line-height: 1.6
}

.facts span {
  font-size: 12px
}

.facts>div:nth-child(2) .icon {
  color: var(--purple)
}

.facts>div:nth-child(3) .icon {
  color: var(--orange)
}

.section {
  padding: 47px 0
}

.section h2 {
  text-align: center;
  margin: 0;
  font-size: 34px;
  letter-spacing: -1px
}

.section-lead {
  text-align: center;
  color: #5c5972;
  line-height: 1.45;
  margin: 10px auto 22px
}

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

.card {
  position: relative;
  background: #fff;
  border: 1px solid #ecebf2;
  border-radius: 13px;
  padding: 28px 30px 30px;
  min-height: 330px;
  box-shadow: 0 5px 16px #15103d12
}

.card:after {
  content: "";
  position: absolute;
  height: 3px;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  border-radius: 0 0 12px 12px
}

.card .icon,
.project .icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: currentColor
}

.card .icon i,
.project .icon i {
  color: #fff;
  font-size: 22px
}

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

.project li i {
  color: inherit;
  margin-right: 4px
}

.card h3 {
  font-size: 21px;
  line-height: 1.15;
  margin: 23px 0 18px;
  color: var(--ink)
}

.card p {
  font-size: 15px;
  line-height: 1.5;
  color: #49465c;
  margin: 0
}

.teal {
  color: #08b9bb
}

.purple {
  color: #8137cf
}

.orange {
  color: #ff7c20
}

.selected {
  background: linear-gradient(90deg, #f9f8ff, #f6f3fd)
}

.work-grid {
  display: grid;
  grid-template-columns: 1.05fr repeat(3, 1fr);
  gap: 20px;
  align-items: stretch
}

.work-intro {
  padding: 38px 24px 18px 0
}

.work-intro h2 {
  text-align: left;
  line-height: 1.05;
  margin-bottom: 20px
}

.work-intro>p:not(.eyebrow) {
  color: #656276;
  line-height: 1.45
}

.work-intro a,
.project a {
  font-weight: 700;
  color: #6431b8;
  font-size: 13px
}

.project {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 14px #1a124010
}

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

.project .icon {
  border-radius: 11px;
  width: 50px;
  height: 50px;
  font-size: 26px
}

.project h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.05
}

.project>p {
  color: #575468;
  line-height: 1.4;
  font-size: 13px
}

.project ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 16px;
  font-size: 13px;
  line-height: 1.8
}

.project li span {
  color: #4c495b
}

.project.orange a {
  color: #f06d12
}

.project.teal a {
  color: #009c9c
}

.experience {
  padding: 34px 0 42px
}

.timeline {
  --tl-1: #08b9bb;
  --tl-2: #3a8fd0;
  --tl-3: #6b5ad4;
  --tl-4: #8137cf;
  --tl-5: #d95560;
  --tl-6: #ff7c20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 28px;
  position: relative;
  gap: 50px
}

.timeline:before {
  content: "";
  position: absolute;
  left: 35px;
  right: 0;
  top: 8px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--tl-1) 0%,
    var(--tl-2) 20%,
    var(--tl-3) 40%,
    var(--tl-4) 60%,
    var(--tl-5) 80%,
    var(--tl-6) 100%
  )
}

.timeline article {
  position: relative;
  padding: 35px 0 0 8%
}

.timeline article:nth-child(1) {
  color: var(--tl-1)
}

.timeline article:nth-child(2) {
  color: var(--tl-2)
}

.timeline article:nth-child(3) {
  color: var(--tl-3)
}

.timeline article:nth-child(4) {
  color: var(--tl-4)
}

.timeline article:nth-child(5) {
  color: var(--tl-5)
}

.dot {
  position: absolute;
  top: 0;
  left: 8%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  z-index: 1
}

.timeline .date {
  font-size: 12px
}

.timeline h3 {
  font-size: 15px;
  color: #111;
  margin: 12px 0 2px
}

.timeline small {
  color: #444
}

.timeline p {
  font-size: 12px;
  color: #555267;
  line-height: 1.45
}

.depth {
  background: linear-gradient(90deg, #f9f8ff, #f6f3fd)
}

.depth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 28px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto
}

.depth-group {
  text-align: left
}

.depth-group .icon {
  font-size: 28px;
  margin-bottom: 14px;
  color: inherit
}

.depth-group h3 {
  font-size: 18px;
  margin: 0 0 14px;
  color: var(--ink)
}

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

.depth-group li {
  font-size: 14px;
  line-height: 1.55;
  color: #555267;
  padding: 6px 0;
  border-top: 1px solid #e4e1ef
}

.depth-group li:last-child {
  border-bottom: 1px solid #e4e1ef
}

.ways {
  text-align: center;
  background: #faf9ff;
  position: relative;
  overflow: hidden;
  padding: 32px 0 15px
}

.way-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 22px auto;
  max-width: 1000px
}

.way-grid>div {
  border-right: 1px solid #ddd9e8
}

.way-grid>div:last-child {
  border: 0
}

.way-grid .icon {
  display: block;
  margin: auto auto 8px
}

.way-grid b {
  font-size: 12px
}

.way-copy {
  color: #706d80;
  font-size: 13px;
  margin: 4px 0 13px
}

.pattern {
  position: absolute;
  width: 150px;
  height: 220px;
  opacity: .8
}

.pattern.left {
  left: -30px;
  bottom: -40px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, #07bfc0 11px 14px, transparent 15px 22px);
  clip-path: polygon(0 30%, 100% 0, 38% 100%, 0 100%)
}

.pattern.right {
  right: -10px;
  bottom: -10px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, #ff7420 11px 13px, transparent 14px 22px);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%)
}

footer {
  background: #090428;
  color: white
}

.footer-main {
  height: 115px;
  display: grid;
  grid-template-columns: 1.2fr 1.25fr 1fr .65fr;
  align-items: center
}

.footer-main>* {
  padding: 0 25px;
  border-right: 1px solid #39344e
}

.footer-main h2 {
  font-size: 24px;
  padding-left: 0
}

.footer-main h2 span {
  color: #14bfc6
}

.footer-main p {
  font-size: 11px;
  line-height: 1.45
}

.footer-main a {
  font-size: 11px;
  font-weight: 700
}

.footer-main .cv {
  padding: 13px;
  border: 1px solid #9c48d0;
  border-radius: 5px;
  text-align: center
}

.copyright {
  height: 55px;
  border-top: 1px solid #28233c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9c99ad;
  font-size: 11px
}

@media(max-width:900px) {
  .navlinks {
    display: none
  }

  .hero {
    min-height: auto
  }

  .hero-body {
    height: auto;
    padding: 70px 0 50px;
    display: block
  }

  .hero-copy {
    width: 100%
  }

  .hero h1 {
    font-size: 46px
  }

  .portrait-wrap {
    width: 100%;
    height: 460px;
    margin-top: 30px
  }

  .portrait {
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: 360px
  }

  .facts {
    height: auto;
    grid-template-columns: 1fr 1fr;
    padding: 25px 0
  }

  .facts div span.icon {
    font-size: 28px;
  }

  .facts>div {
    border: 0;
    padding: 18px
  }

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

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

  .work-intro {
    grid-column: 1/-1
  }

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

  .depth-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }

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

  .footer-main {
    height: auto;
    grid-template-columns: 1fr 1fr;
    padding: 30px 0;
    gap: 20px
  }

  .footer-main>* {
    border: 0;
    padding: 0
  }

  .copyright {
    height: auto;
    padding: 18px 0;
    gap: 20px
  }
}

@media(max-width:560px) {
  .wrap {
    width: 88%
  }

  .logo {
    font-size: 22px
  }

  .top-cta {
    padding: 11px 15px
  }

  .hero h1 {
    font-size: 39px
  }

  .desktop {
    display: none
  }

  .intro {
    font-size: 14px
  }

  .actions a {
    min-width: 0;
    flex: 1;
    padding: 0 15px
  }

  .portrait-wrap {
    height: 370px
  }

  .portrait {
    width: 300px;
    height: 300px;
    left: 50%
  }

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

  .facts>div {
    border-bottom: 1px solid #29253f
  }

  .service-grid,
  .work-grid,
  .timeline {
    grid-template-columns: 1fr
  }

  .card {
    min-height: 0
  }

  .timeline:before {
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto
  }

  .timeline article {
    padding: 5px 0 20px 45px
  }

  .dot {
    left: 8px
  }

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

  .way-grid>div {
    border: 0
  }

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

  .copyright {
    display: block;
    line-height: 2
  }

  .section h2 {
    font-size: 29px
  }
}