@import "https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@latest/400-italic.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@latest/700.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@latest/700-italic.css";

*,
::before,
::after {
  box-sizing: border-box
}

body {
  margin: 0;
  scrollbar-gutter: stable;
  min-height: 100vh;
  font-family: 'DM Sans', sans-serif;
  background: linear-gradient(168deg, #0d0d14 0%, #181824 48%, #1a1a2e 100%);
  color: #f4f4f9;
  font-size: 15px;
  line-height: 1.6
}

.topbar {
  background: linear-gradient(135deg, #964bea14 0%, #0295ab0f 100%);
  padding: 24px 48px;
  position: relative;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: -1px 5px 18px 1px #964bea17
}

.topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #964BEA 0%, #0295AB 50%, #964BEA 100%);
  background-size: 200% 100%;
  animation: gradientShift 8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite
}

@keyframes gradientShift {

  0%,
  100% {
    background-position: 0 50%
  }

  50% {
    background-position: 100% 50%
  }
}

.topbarGrid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center
}

.brandCell {
  display: flex;
  align-items: center;
  gap: 24px
}

.logoRing {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff0a;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #964bea4d -1px 5px 18px 1px #964bea17;
  transition: box-shadow .28s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform .32s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.logoRing:hover {
  box-shadow: 0 0 0 2px #0295ab80 -1px 10px 44px 1px #0295ab1c;
  transform: translateY(-2px)
}

.logoRing img {
  width: 58px;
  height: 58px;
  object-fit: contain
}

.brandText {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.companyName {
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: .02em
}

.tagline {
  font-size: 15px;
  color: #ffffffad;
  line-height: 1.35
}

.navPlate {
  display: flex;
  align-items: center;
  justify-content: center
}

.primaryNav {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center
}

.primaryNav li {
  margin: 0
}

.navLink {
  display: block;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 700;
  color: #f4f4f9;
  text-decoration: none;
  border-radius: 8px;
  background: #ffffff08;
  transition: background .27s cubic-bezier(0.4, 0, 0.2, 1), color .27s cubic-bezier(0.4, 0, 0.2, 1), transform .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  overflow: hidden
}

.navLink::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #964bea26 0%, #0295ab26 100%);
  transition: left .35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: -1
}

.navLink:hover::before {
  left: 0
}

.navLink:hover {
  background: linear-gradient(135deg, #964bea33 0%, #0295ab2e 100%);
  color: #fff;
  transform: translateY(-1px)
}

.navLink:focus {
  outline: 2px solid #964bea99;
  outline-offset: 2px
}

.contactCell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end
}

.phoneLink {
  font-size: 15px;
  font-weight: 700;
  color: #0295AB;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .26s ease-in-out, transform .28s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.phoneLink:hover {
  color: #964BEA;
  transform: translateX(-3px)
}

.phoneLink:focus {
  text-decoration: underline;
  outline: none
}

.phoneIcon {
  width: 18px;
  height: 18px;
  fill: currentColor
}

.emailLink {
  font-size: 15px;
  color: #ffffffb3;
  text-decoration: none;
  transition: color .26s ease-in-out
}

.emailLink:hover {
  color: #fff
}

.emailLink:focus {
  text-decoration: underline;
  outline: none
}

@media (max-width: 1024px) {
  .topbarGrid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .brandCell {
    justify-content: center
  }

  .navPlate {
    order: 3
  }

  .contactCell {
    order: 2;
    align-items: center
  }

  .primaryNav {
    justify-content: center
  }
}

@media (max-width: 768px) {
  .topbar {
    padding: 24px
  }

  .topbarGrid {
    gap: 24px
  }

  .brandCell {
    flex-direction: column;
    gap: 12px
  }

  .brandText {
    align-items: center;
    text-align: center
  }

  .primaryNav {
    flex-direction: column;
    width: 100%;
    gap: 8px
  }

  .navLink {
    width: 100%;
    text-align: center
  }

  .contactCell {
    gap: 12px
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: 24px 12px
  }

  .companyName {
    font-size: 23px
  }

  .tagline {
    font-size: 15px
  }

  .logoRing {
    width: 58px;
    height: 58px
  }

  .logoRing img {
    width: 54px;
    height: 54px
  }
}

.baseFooter {
  background: linear-gradient(168deg, #0f0f18 0%, #1a1a2e 100%);
  padding: 96px 48px 48px;
  position: relative;
  margin-top: 96px
}

.baseFooter::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #964BEA 25%, #0295AB 50%, #964BEA 75%, transparent 100%)
}

.footerContainer {
  max-width: 1320px;
  margin: 0 auto
}

.footerTopRow {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 96px
}

.brandColumn {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.footerLogoRing {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff0a;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #0295ab4d -1px 5px 18px 1px #0295ab17;
  transition: box-shadow .28s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.footerLogoRing:hover {
  box-shadow: 0 0 0 2px #964bea80 -1px 10px 44px 1px #964bea1c
}

.footerLogoRing img {
  width: 58px;
  height: 58px;
  object-fit: contain
}

.brandDescription {
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffb8;
  max-width: 420px
}

.brandDescription strong {
  color: #fff;
  font-weight: 700
}

.socialRow {
  display: flex;
  gap: 12px;
  margin-top: 12px
}

.socialButton {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff0a;
  border-radius: 8px;
  color: #ffffffb3;
  text-decoration: none;
  transition: background .27s cubic-bezier(0.4, 0, 0.2, 1), color .27s cubic-bezier(0.4, 0, 0.2, 1), transform .3s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.socialButton:hover {
  background: linear-gradient(135deg, #964bea33 0%, #0295ab2e 100%);
  color: #fff;
  transform: translateY(-2px)
}

.socialButton:focus {
  outline: 2px solid #964bea99;
  outline-offset: 2px
}

.footerColumn {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.columnHeading {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0;
  line-height: 1.1
}

.footerLinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.footerLinks li {
  margin: 0
}

.footerLink {
  font-size: 15px;
  color: #ffffffad;
  text-decoration: none;
  display: inline-block;
  transition: color .26s ease-in-out, transform .28s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  padding-left: 8px
}

.footerLink::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #964BEA 0%, #0295AB 100%);
  transition: width .32s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.footerLink:hover {
  color: #fff;
  transform: translateX(4px)
}

.footerLink:hover::before {
  width: 3px
}

.footerLink:focus {
  text-decoration: underline;
  outline: none
}

.contactColumn {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.contactDetail {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.contactLabel {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff80;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1
}

.contactValue {
  font-size: 15px;
  color: #fffc;
  line-height: 1.6
}

.contactValue a {
  color: #0295AB;
  text-decoration: none;
  transition: color .26s ease-in-out
}

.contactValue a:hover {
  color: #964BEA
}

.contactValue a:focus {
  text-decoration: underline;
  outline: none
}

.footerBottomRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  padding-top: 48px;
  border-top: 1px solid #ffffff14
}

.copyright {
  font-size: 15px;
  color: #ffffff80;
  line-height: 1.35
}

.legalNav {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0
}

.legalNav li {
  margin: 0
}

.legalLink {
  font-size: 15px;
  color: #fff9;
  text-decoration: none;
  transition: color .26s ease-in-out
}

.legalLink:hover {
  color: #fff
}

.legalLink:focus {
  text-decoration: underline;
  outline: none
}

@media (max-width: 1024px) {
  .footerTopRow {
    grid-template-columns: 1fr 1fr;
    gap: 48px
  }

  .brandColumn {
    grid-column: 1 / -1
  }
}

@media (max-width: 768px) {
  .baseFooter {
    padding: 48px 24px 24px;
    margin-top: 48px
  }

  .footerTopRow {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 48px
  }

  .footerBottomRow {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px
  }

  .legalNav {
    flex-direction: column;
    gap: 12px
  }
}

@media (max-width: 480px) {
  .baseFooter {
    padding: 48px 12px 24px
  }

  .footerTopRow {
    gap: 48px
  }

  .socialRow {
    flex-wrap: wrap
  }
}

.policyContent {
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px 24px;
  background: #0f0f19d9;
  border-radius: 12px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: -1px 5px 18px 1px #964bea17;
  color: #e8e8e8;
  font-size: 15px;
  line-height: 1.8
}

.policyContent h1 {
  font-size: 58px;
  line-height: 1.1;
  margin: 0 0 48px;
  color: #fff
}

.policyContent h2 {
  font-size: 43px;
  line-height: 1.35;
  margin: 96px 0 24px;
  color: #fff
}

.policyContent h2:first-of-type {
  margin-top: 48px
}

.policyContent h3 {
  font-size: 31px;
  line-height: 1.35;
  margin: 48px 0 24px;
  color: #fff
}

.policyContent h4 {
  font-size: 23px;
  line-height: 1.35;
  margin: 24px 0 12px;
  color: #fff
}

.policyContent p {
  margin: 0 0 24px
}

.policyContent ul,
.policyContent ol {
  margin: 0 0 24px;
  padding: 0 0 0 24px
}

.policyContent ul ul,
.policyContent ul ol,
.policyContent ol ul,
.policyContent ol ol {
  margin: 12px 0
}

.policyContent li {
  margin: 8px 0;
  padding-left: 8px
}

.policyContent strong,
.policyContent b {
  color: #fff;
  font-weight: 600
}

.policyContent a {
  color: #964BEA;
  text-decoration: none;
  border-bottom: 1px solid #964bea4d;
  transition: border-color .28s cubic-bezier(0.4, 0, 0.2, 1), color .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.policyContent a:hover {
  color: #0295AB;
  border-bottom-color: #0295ab99
}

.policyContent table {
  width: 100%;
  margin: 48px 0;
  border-collapse: collapse;
  background: #19192399;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: -1px 3px 5px 1px #0295ab0f
}

.policyContent thead {
  background: #964bea26
}

.policyContent th {
  padding: 12px 24px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  border-bottom: 2px solid #964bea4d
}

.policyContent td {
  padding: 12px 24px;
  border-bottom: 1px solid #ffffff14
}

.policyContent tr:last-child td {
  border-bottom: none
}

.policyContent tbody tr {
  transition: background-color .26s ease-in-out
}

.policyContent tbody tr:hover {
  background: #964bea14
}

.policyContent hr {
  margin: 48px 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #964bea66 20%, #0295ab66 80%, transparent)
}

@media (max-width: 768px) {
  .policyContent {
    padding: 24px 12px;
    border-radius: 8px
  }

  .policyContent h1 {
    font-size: 43px;
    margin-bottom: 24px
  }

  .policyContent h2 {
    font-size: 31px;
    margin-top: 48px
  }

  .policyContent h3 {
    font-size: 23px
  }

  .policyContent h4 {
    font-size: 15px
  }

  .policyContent table {
    display: block;
    overflow-x: auto;
    margin: 24px -12px;
    border-radius: 0
  }

  .policyContent th,
  .policyContent td {
    padding: 8px 12px;
    font-size: 15px
  }

  .policyContent ul,
  .policyContent ol {
    padding-left: 24px
  }
}

@media (max-width: 480px) {
  .policyContent h1 {
    font-size: 31px
  }

  .policyContent h2 {
    font-size: 23px
  }

  .policyContent h3 {
    font-size: 15px
  }
}

.entry {
  background: #0a0a0a;
  color: #e8e8e8;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden
}

.entry::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: radial-gradient(ellipse at 50% 50%, #944bea14 0%, transparent 65%);
  pointer-events: none;
  z-index: 1
}

.entry * {
  box-sizing: border-box
}

.entry ::selection {
  background: #944bea40;
  color: #fff
}

.openingblock {
  position: relative;
  background: #f4f4f4;
  padding: 48px 24px;
  overflow: hidden;
  z-index: 2
}

.openingblock::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 24px;
  width: 180px;
  height: 180px;
  border: 3px solid #964BEA;
  border-radius: 50%;
  opacity: .15;
  z-index: 1
}

.openingblock::after {
  content: '';
  position: absolute;
  bottom: 48px;
  right: 48px;
  width: 120px;
  height: 120px;
  border: 2px solid #0295AB;
  border-radius: 3px;
  opacity: .12;
  transform: rotate(15deg);
  z-index: 1
}

.openingwrapper {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 2
}

.openingtitle {
  font-size: 58px;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0 0 24px;
  max-width: 920px
}

.openingtitle .highlight {
  background: linear-gradient(117deg, #964BEA 0%, #0295AB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  animation: revealword .85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0
}

@keyframes revealword {
  to {
    opacity: 1
  }
}

.openingshape {
  position: absolute;
  top: 50%;
  right: 96px;
  width: 240px;
  height: 240px;
  transform: translateY(-50%);
  z-index: 1
}

.openingshape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid #964BEA;
  border-radius: 50%;
  opacity: .08
}

.openingshape::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 2px solid #0295AB;
  border-radius: 50%;
  opacity: .06
}

.methodzone {
  position: relative;
  padding: 96px 24px;
  background: #0a0a0a;
  z-index: 2
}

.methodzone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #964BEA 50%, transparent 100%)
}

.methodzone::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #0295AB 50%, transparent 100%);
  opacity: .6
}

.methodcontainer {
  max-width: 1320px;
  margin: 0 auto
}

.methodheader {
  font-size: 43px;
  line-height: 1.35;
  color: #e8e8e8;
  margin: 0 0 48px;
  max-width: 780px
}

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

.methodcard {
  background: #14141499;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 24px;
  border-left: 3px solid #964BEA;
  position: relative;
  transition: transform .32s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: -1px 5px 18px 1px #944bea17
}

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

.methodcard:nth-child(2) {
  border-left-color: #0295AB
}

.methodcard:nth-child(3) {
  border-left-color: #964BEA
}

.methodlabel {
  font-size: 23px;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 12px
}

.methodtext {
  font-size: 15px;
  line-height: 1.6;
  color: #b8b8b8;
  margin: 0
}

.transformarea {
  position: relative;
  padding: 96px 24px;
  background: linear-gradient(117deg, #0a0a0a 0%, #121212 100%);
  z-index: 2
}

.transformwrapper {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: center
}

.transformcontent {
  flex: 1
}

.transformheading {
  font-size: 43px;
  line-height: 1.35;
  color: #e8e8e8;
  margin: 0 0 24px
}

.transformquote {
  font-size: 23px;
  line-height: 1.6;
  color: #b8b8b8;
  margin: 0 0 24px;
  padding-left: 24px;
  border-left: 3px solid #0295AB;
  font-style: italic
}

.transformdetail {
  font-size: 15px;
  line-height: 1.6;
  color: #a0a0a0;
  margin: 0
}

.transformimage {
  flex: 0 0 420px;
  height: 480px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: -1px 10px 44px 1px #0295ab1c
}

.transformimage img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.gapblock {
  position: relative;
  padding: 96px 24px;
  background: #0a0a0a;
  z-index: 2
}

.gapblock::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #964BEA 50%, transparent 100%)
}

.gapcontainer {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center
}

.gapleft {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.gaptitle {
  font-size: 43px;
  line-height: 1.35;
  color: transparent;
  -webkit-text-stroke: 1px #964BEA;
  margin: 0
}

.gapdescription {
  font-size: 15px;
  line-height: 1.6;
  color: #b8b8b8;
  margin: 0
}

.gapright {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.gapstep {
  background: #14141499;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 24px;
  border-radius: 8px;
  border-left: 3px solid #0295AB;
  position: relative;
  overflow: hidden;
  transition: background .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.gapstep:hover {
  background: linear-gradient(117deg, #944bea1f 0%, #0295ab14 100%)
}

.gapstep:nth-child(2) {
  border-left-color: #964BEA
}

.gapsteplabel {
  font-size: 23px;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 8px
}

.gapsteptext {
  font-size: 15px;
  line-height: 1.6;
  color: #b8b8b8;
  margin: 0
}

.currentzone {
  position: relative;
  padding: 96px 24px;
  background: linear-gradient(117deg, #121212 0%, #0a0a0a 100%);
  z-index: 2
}

.currentcontainer {
  max-width: 1320px;
  margin: 0 auto
}

.currentheader {
  font-size: 43px;
  line-height: 1.35;
  color: #e8e8e8;
  margin: 0 0 48px;
  text-align: center
}

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

.currentitem {
  background: #14141499;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: -1px 5px 18px 1px #944bea17
}

.currentitem:hover {
  transform: scale(1.02)
}

.currentitemimage {
  width: 100%;
  height: 280px;
  position: relative
}

.currentitemimage img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.currentitemcontent {
  padding: 24px;
  border-left: 3px solid #0295AB
}

.currentitem:nth-child(2) .currentitemcontent {
  border-left-color: #964BEA
}

.currentitemtitle {
  font-size: 23px;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 12px
}

.currentitemtext {
  font-size: 15px;
  line-height: 1.6;
  color: #b8b8b8;
  margin: 0
}

.experiencesection {
  position: relative;
  padding: 96px 24px;
  background: #0a0a0a;
  z-index: 2
}

.experiencesection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #0295AB 50%, transparent 100%)
}

.experiencecontainer {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: flex-start
}

.experienceleft {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.experiencetitle {
  font-size: 43px;
  line-height: 1.35;
  color: #e8e8e8;
  margin: 0
}

.experiencebody {
  font-size: 15px;
  line-height: 1.6;
  color: #b8b8b8;
  margin: 0
}

.experienceright {
  flex: 0 0 520px;
  background: #14141499;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 24px;
  border-left: 3px solid #964BEA;
  position: relative;
  box-shadow: -1px 10px 44px 1px #944bea1c
}

.experienceright::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(117deg, #944bea0d 0%, transparent 100%);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s cubic-bezier(0.4, 0, 0.2, 1)
}

.experienceright:hover::before {
  opacity: 1
}

.experiencequote {
  font-size: 23px;
  line-height: 1.6;
  color: #fff;
  margin: 0 0 24px;
  font-style: italic
}

.experienceauthor {
  font-size: 15px;
  line-height: 1.6;
  color: #a0a0a0;
  margin: 0
}

.closingarea {
  position: relative;
  padding: 96px 24px;
  background: linear-gradient(117deg, #0a0a0a 0%, #121212 100%);
  z-index: 2
}

.closingcontainer {
  max-width: 1320px;
  margin: 0 auto;
  text-align: center
}

.closingtitle {
  font-size: 43px;
  line-height: 1.35;
  color: transparent;
  -webkit-text-stroke: 1px #0295AB;
  margin: 0 0 24px
}

.closingtext {
  font-size: 15px;
  line-height: 1.6;
  color: #b8b8b8;
  margin: 0 auto;
  max-width: 840px
}

.closingcta {
  margin: 48px 0 0
}

.closingbutton {
  display: inline-block;
  padding: 12px 48px;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(117deg, #964BEA 0%, #0295AB 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -1px 5px 18px 1px #944bea17;
  text-decoration: none
}

.closingbutton:hover {
  transform: translateY(-2px);
  box-shadow: -1px 10px 44px 1px #944bea1c
}

.closingbutton:active {
  transform: translateY(0)
}

@media (max-width: 1024px) {
  .openingtitle {
    font-size: 43px
  }

  .openingshape {
    width: 180px;
    height: 180px;
    right: 48px
  }

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

  .transformwrapper {
    flex-direction: column
  }

  .transformimage {
    flex: 0 0 auto;
    width: 100%;
    height: 400px
  }

  .gapcontainer {
    grid-template-columns: 1fr;
    gap: 48px
  }

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

  .experiencecontainer {
    flex-direction: column
  }

  .experienceright {
    flex: 0 0 auto;
    width: 100%
  }
}

@media (max-width: 768px) {
  .openingblock {
    padding: 24px
  }

  .openingtitle {
    font-size: 31px
  }

  .openingshape {
    display: none
  }

  .methodzone {
    padding: 48px 24px
  }

  .methodheader {
    font-size: 31px;
    margin: 0 0 24px
  }

  .transformarea {
    padding: 48px 24px
  }

  .transformheading {
    font-size: 31px
  }

  .transformquote {
    font-size: 15px
  }

  .transformimage {
    height: 320px
  }

  .gapblock {
    padding: 48px 24px
  }

  .gaptitle {
    font-size: 31px
  }

  .currentzone {
    padding: 48px 24px
  }

  .currentheader {
    font-size: 31px;
    margin: 0 0 24px
  }

  .currentitemimage {
    height: 220px
  }

  .experiencesection {
    padding: 48px 24px
  }

  .experiencetitle {
    font-size: 31px
  }

  .experiencequote {
    font-size: 15px
  }

  .closingarea {
    padding: 48px 24px
  }

  .closingtitle {
    font-size: 31px
  }

  .closingbutton {
    width: 100%;
    padding: 12px 24px
  }
}

@media (max-width: 480px) {
  .openingtitle {
    font-size: 23px
  }

  .methodheader {
    font-size: 23px
  }

  .methodlabel {
    font-size: 15px
  }

  .transformheading {
    font-size: 23px
  }

  .gaptitle {
    font-size: 23px
  }

  .gapsteplabel {
    font-size: 15px
  }

  .currentheader {
    font-size: 23px
  }

  .currentitemtitle {
    font-size: 15px
  }

  .experiencetitle {
    font-size: 23px
  }

  .closingtitle {
    font-size: 23px
  }

  .gapcontainer {
    gap: 24px
  }

  .transformwrapper {
    gap: 24px
  }

  .experiencecontainer {
    gap: 24px
  }
}

.services {
  background: #0a0a0d;
  color: #e8e8ea;
  min-height: 100vh
}

.services * {
  box-sizing: border-box
}

.services .servicesLeadVisual {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  position: relative
}

.services .servicesLeadVisual::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 8%;
  width: 280px;
  height: 280px;
  background: radial-gradient(ellipse at center, #964bea14, transparent);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0
}

.services .servicesLeadVisual::after {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 12%;
  width: 320px;
  height: 320px;
  background: radial-gradient(ellipse at center, #0295ab0f, transparent);
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0
}

.services .textColumn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 48px 0
}

.services .leadHeading {
  font-size: 58px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
  color: #fff;
  letter-spacing: -.02em
}

.services .leadHeading .accentWord {
  position: relative;
  display: inline-block;
  color: #964BEA
}

.services .leadHeading .accentWord::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #964BEA, #0295AB);
  animation: underlineDraw 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) .4s forwards
}

@keyframes underlineDraw {
  to {
    width: 100%
  }
}

.services .leadList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.services .leadList li {
  font-size: 23px;
  line-height: 1.6;
  color: #c4c4c8;
  padding-left: 32px;
  position: relative
}

.services .leadList li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: #0295AB;
  border-radius: 50%;
  box-shadow: 0 0 12px #0295ab80
}

.services .imageColumn {
  position: relative;
  z-index: 1;
  height: 580px;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid #964bea4d;
  box-shadow: -1px 10px 44px 1px #964bea1c
}

.services .leadImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) contrast(1.1);
  position: relative
}

.services .leadImage::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #964bea33, #0295ab26);
  pointer-events: none;
  mix-blend-mode: overlay
}

.services .imageColumn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #964bea33, #0295ab26);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay
}

.services .offeringsContainer {
  background: #964bea05;
  position: relative;
  overflow: hidden
}

.services .offeringsContainer::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 40px;
  background-image: radial-gradient(circle at 20px 0, transparent 20px, #964bea05 20px);
  background-size: 40px 40px;
  background-repeat: repeat-x;
  background-position: 0 0
}

.services .offeringsWrapper {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 24px;
  position: relative;
  z-index: 1
}

.services .offeringsIntro {
  text-align: center;
  margin-bottom: 48px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto
}

.services .offeringsTitle {
  font-size: 43px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 24px;
  color: #fff;
  -webkit-text-stroke: 1px #fff;
  -webkit-text-fill-color: transparent;
  text-stroke: 1px #fff;
  text-fill-color: transparent;
  paint-order: stroke fill
}

.services .offeringsDescription {
  font-size: 23px;
  line-height: 1.6;
  color: #c4c4c8;
  margin: 0
}

.services .offeringsDescription .highlightPhrase {
  background: linear-gradient(90deg, #964bea40, #0295ab40);
  padding: 4px 8px;
  border-radius: 3px;
  color: #fff
}

.services .offeringsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px
}

.services .largeCard {
  background: #14141c99;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 48px;
  border-left: 3px solid #964BEA;
  border-right: 1px solid #964bea33;
  box-shadow: -1px 5px 18px 1px #964bea17;
  position: relative;
  overflow: hidden;
  height: 0;
  animation: expandHeight .7s cubic-bezier(0.68, -0.55, 0.265, 1.55) .2s forwards
}

@keyframes expandHeight {
  from {
    height: 0;
    padding-top: 0;
    padding-bottom: 0
  }

  to {
    height: auto;
    padding-top: 48px;
    padding-bottom: 48px
  }
}

.services .largeCard:hover {
  border-left-color: #0295AB;
  box-shadow: -1px 10px 44px 1px #0295ab1c;
  transition: border-left-color .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.services .cardTitle {
  font-size: 31px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 24px;
  color: #fff
}

.services .cardDescription {
  font-size: 23px;
  line-height: 1.6;
  color: #c4c4c8;
  margin: 0 0 24px
}

.services .featureList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px
}

.services .featureList li {
  font-size: 15px;
  line-height: 1.6;
  color: #a8a8b0;
  padding-left: 24px;
  position: relative
}

.services .featureList li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 2px solid #0295AB;
  border-radius: 2px;
  background: transparent
}

.services .smallCardsRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.services .smallCard {
  background: #14141c99;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  padding: 24px;
  border-left: 3px solid #0295AB;
  border-right: 1px solid #0295ab33;
  box-shadow: -1px 3px 5px 1px #0295ab0f;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 0;
  animation: expandHeight .7s cubic-bezier(0.68, -0.55, 0.265, 1.55) .5s forwards
}

.services .smallCard:hover {
  transform: translateY(-4px);
  box-shadow: -1px 10px 44px 1px #0295ab1c
}

.services .smallCard .cardTitle {
  font-size: 23px;
  line-height: 1.35;
  margin: 0 0 12px
}

.services .smallCard .cardDescription {
  font-size: 15px;
  line-height: 1.6;
  margin: 0
}

.services .detailsSection {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 24px
}

.services .detailsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px
}

.services .detailBlock {
  background: #14141c99;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 48px;
  border-left: 3px solid #964BEA;
  box-shadow: -1px 5px 18px 1px #964bea17;
  position: relative;
  overflow: hidden;
  height: 0;
  animation: expandHeight .7s cubic-bezier(0.68, -0.55, 0.265, 1.55) .8s forwards
}

.services .detailBlock:nth-child(2) {
  animation-delay: 1s
}

.services .detailBlock .blockHeading {
  font-size: 31px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 24px;
  color: #fff
}

.services .detailBlock .blockText {
  font-size: 15px;
  line-height: 1.8;
  color: #c4c4c8;
  margin: 0 0 24px
}

.services .detailBlock .blockText:last-child {
  margin-bottom: 0
}

.services .metricsRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px
}

.services .metricBox {
  background: #0a0a0d80;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  border: 1px solid #964bea33;
  position: relative;
  overflow: hidden;
  transition: background .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.services .metricBox:hover {
  background: linear-gradient(135deg, #964bea26, #0295ab26)
}

.services .metricBox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #964BEA, #0295AB);
  opacity: 0;
  transition: opacity .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.services .metricBox:hover::before {
  opacity: 1
}

.services .metricValue {
  font-size: 43px;
  line-height: 1.1;
  font-weight: 700;
  color: #964BEA;
  margin: 0 0 8px;
  display: block
}

.services .metricLabel {
  font-size: 15px;
  line-height: 1.35;
  color: #a8a8b0;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .08em
}

.services .processSteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.services .processSteps li {
  font-size: 15px;
  line-height: 1.8;
  color: #c4c4c8;
  padding-left: 48px;
  position: relative;
  transition: color .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.services .processSteps li:hover {
  color: #fff
}

.services .processSteps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0295AB);
  transition: width .38s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.services .processSteps li:hover::before {
  width: 40px
}

.services .processSteps li strong {
  color: #fff;
  font-weight: 600
}

@media (max-width: 1024px) {
  .services .servicesLeadVisual {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 48px 24px
  }

  .services .imageColumn {
    height: 420px
  }

  .services .leadHeading {
    font-size: 43px
  }

  .services .detailsGrid {
    grid-template-columns: 1fr;
    gap: 24px
  }

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

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

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

@media (max-width: 768px) {
  .services .servicesLeadVisual {
    padding: 48px 12px
  }

  .services .offeringsWrapper {
    padding: 48px 12px
  }

  .services .detailsSection {
    padding: 48px 12px
  }

  .services .leadHeading {
    font-size: 31px
  }

  .services .leadList li {
    font-size: 15px
  }

  .services .offeringsTitle {
    font-size: 31px
  }

  .services .offeringsDescription {
    font-size: 15px
  }

  .services .largeCard {
    padding: 24px
  }

  .services .smallCard {
    padding: 24px
  }

  .services .detailBlock {
    padding: 24px
  }

  .services .cardTitle {
    font-size: 23px
  }

  .services .cardDescription {
    font-size: 15px
  }

  .services .imageColumn {
    height: 320px
  }
}

@media (max-width: 480px) {
  .services .servicesLeadVisual {
    padding: 24px 12px
  }

  .services .offeringsWrapper {
    padding: 24px 12px
  }

  .services .detailsSection {
    padding: 24px 12px
  }

  .services .leadHeading {
    font-size: 23px
  }

  .services .offeringsTitle {
    font-size: 23px
  }

  .services .metricValue {
    font-size: 31px
  }
}

.aboutCompany {
  background: #0a0a0f;
  color: #e8e8ed;
  min-height: 100vh
}

.aboutCompany .topIntroduction {
  position: relative;
  padding: 96px 24px;
  max-width: 1320px;
  margin: 0 auto;
  overflow: hidden;
  background: radial-gradient(ellipse 800px 600px at 20% 30%, #964bea26, transparent), radial-gradient(ellipse 700px 500px at 80% 70%, #0295ab1f, transparent), radial-gradient(ellipse 900px 700px at 50% 50%, #964bea14, transparent), #0f0f18
}

.aboutCompany .topIntroduction::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background: radial-gradient(ellipse 100% 100% at 50% 100%, #0a0a0f 0%, transparent 100%);
  pointer-events: none
}

.aboutCompany .introductionContainer {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2
}

.aboutCompany .mainStatement {
  font-size: 58px;
  line-height: 1.1;
  margin: 0 0 24px;
  font-weight: 700;
  color: #fff
}

.aboutCompany .accentMark {
  color: #964BEA;
  display: inline-block;
  animation: markPulse 2.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite
}

@keyframes markPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1
  }

  50% {
    transform: scale(1.15);
    opacity: .85
  }
}

.aboutCompany .supportingText {
  font-size: 23px;
  line-height: 1.6;
  color: #b8b8c4;
  margin: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto
}

.aboutCompany .doubleColumnNarrative {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 24px;
  position: relative
}

.aboutCompany .narrativeGrid {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 48px;
  align-items: start
}

.aboutCompany .leftAccentPanel {
  position: sticky;
  top: 96px
}

.aboutCompany .decorativeBracket {
  width: 100%;
  aspect-ratio: 1;
  border: 3px solid #964BEA;
  border-right: none;
  border-radius: 12px 0 0 12px;
  position: relative;
  background: linear-gradient(135deg, #964bea0d, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: -1px 10px 44px 1px #964bea1c
}

.aboutCompany .decorativeBracket::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 2px solid #0295ab4d;
  border-right: none;
  border-radius: 8px 0 0 8px;
  pointer-events: none
}

.aboutCompany .decorativeBracket::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: radial-gradient(ellipse at center, #0295AB, transparent);
  opacity: .4;
  animation: pulseGlow 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite
}

@keyframes pulseGlow {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: .4
  }

  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: .15
  }
}

.aboutCompany .rightContentArea {
  display: flex;
  flex-direction: column;
  gap: 48px
}

.aboutCompany .storySegment {
  background: #14141e99;
  border-radius: 12px;
  padding: 48px;
  border-left: 8px solid #964BEA;
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: -1px 5px 18px 1px #964bea17;
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease-in-out
}

.aboutCompany .storySegment:hover {
  transform: translateY(-8px);
  box-shadow: -1px 10px 44px 1px #964bea1c
}

.aboutCompany .storySegment::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #964BEA, transparent);
  opacity: 0;
  transition: opacity .28s ease-in-out
}

.aboutCompany .storySegment:hover::before {
  opacity: 1
}

.aboutCompany .segmentLabel {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #0295AB;
  margin: 0 0 12px;
  font-weight: 600
}

.aboutCompany .segmentHeading {
  font-size: 31px;
  line-height: 1.35;
  margin: 0 0 24px;
  color: #fff;
  font-weight: 700
}

.aboutCompany .segmentText {
  font-size: 15px;
  line-height: 1.8;
  color: #c4c4d0;
  margin: 0
}

.aboutCompany .segmentText+.segmentText {
  margin-top: 24px
}

.aboutCompany .testimonialWithMetrics {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 24px;
  position: relative;
  background-image: url("../images/v-220250415.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-radius: 0;
  overflow: hidden
}

.aboutCompany .testimonialWithMetrics::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0a0a0ff2, #0f0f18eb);
  pointer-events: none;
  z-index: 1
}

.aboutCompany .testimonialInner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto
}

.aboutCompany .testimonialLayout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: center
}

.aboutCompany .quoteArea {
  background: #1e1e2abf;
  padding: 48px;
  border-radius: 12px;
  border-left: 8px solid #0295AB;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: -1px 10px 44px 1px #0295ab1c;
  position: relative
}

.aboutCompany .quoteArea::after {
  content: '';
  position: absolute;
  top: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #964bea26, transparent);
  border-radius: 50%;
  pointer-events: none
}

.aboutCompany .quoteText {
  font-size: 23px;
  line-height: 1.6;
  color: #e8e8ed;
  margin: 0 0 24px;
  font-style: italic;
  position: relative
}

.aboutCompany .quoteAuthor {
  font-size: 15px;
  line-height: 1.6;
  color: #0295AB;
  margin: 0;
  font-weight: 600
}

.aboutCompany .metricsStack {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.aboutCompany .metricCard {
  background: #14141ecc;
  padding: 24px;
  border-radius: 8px;
  border-left: 4px solid #964BEA;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: -1px 5px 18px 1px #964bea17;
  transition: transform .32s cubic-bezier(0.34, 1.56, 0.64, 1), border-left-color .26s ease-in-out
}

.aboutCompany .metricCard:hover {
  transform: translateX(-6px) scale(1.02);
  border-left-color: #0295AB
}

.aboutCompany .metricNumber {
  font-size: 43px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 8px;
  font-weight: 700;
  background: linear-gradient(135deg, #964BEA, #0295AB);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

.aboutCompany .metricLabel {
  font-size: 15px;
  line-height: 1.35;
  color: #b8b8c4;
  margin: 0
}

.aboutCompany .dividerThick {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px
}

.aboutCompany .dividerLine {
  height: 4px;
  background: linear-gradient(90deg, transparent, #964BEA 20%, #0295AB 80%, transparent);
  border-radius: 2px;
  position: relative;
  overflow: hidden
}

.aboutCompany .dividerLine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #fff6, transparent);
  animation: shimmerSlide 3s cubic-bezier(0.4, 0, 0.2, 1) infinite
}

@keyframes shimmerSlide {
  0% {
    left: -100%
  }

  100% {
    left: 200%
  }
}

.aboutCompany .teamShowcase {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 24px 48px
}

.aboutCompany .showcaseHeading {
  font-size: 43px;
  line-height: 1.35;
  margin: 0 0 48px;
  text-align: center;
  color: #fff;
  font-weight: 700
}

.aboutCompany .teamGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.aboutCompany .memberCard {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #14141e99;
  box-shadow: -1px 5px 18px 1px #964bea17;
  transition: transform .34s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .29s ease-in-out
}

.aboutCompany .memberCard:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: -1px 10px 44px 1px #964bea1c !important
}

.aboutCompany .memberImageWrapper {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden
}

.aboutCompany .memberImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .38s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.aboutCompany .memberCard:hover .memberImage {
  transform: scale(1.08)
}

.aboutCompany .memberCaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, #0a0a0ff2 0%, transparent 100%);
  padding: 48px 24px 24px;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.aboutCompany .memberCard:hover .memberCaption {
  transform: translateY(0)
}

.aboutCompany .memberName {
  font-size: 23px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: #fff;
  font-weight: 600
}

.aboutCompany .memberRole {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: #0295AB
}

@media (max-width: 1024px) {
  .aboutCompany .topIntroduction {
    padding: 48px 24px
  }

  .aboutCompany .mainStatement {
    font-size: 43px
  }

  .aboutCompany .supportingText {
    font-size: 15px
  }

  .aboutCompany .narrativeGrid {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .aboutCompany .leftAccentPanel {
    position: static;
    max-width: 240px;
    margin: 0 auto
  }

  .aboutCompany .testimonialLayout {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .aboutCompany .metricsStack {
    flex-direction: row;
    gap: 12px
  }

  .aboutCompany .metricCard {
    flex: 1
  }

  .aboutCompany .teamGrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 768px) {
  .aboutCompany .topIntroduction {
    padding: 48px 12px
  }

  .aboutCompany .mainStatement {
    font-size: 31px
  }

  .aboutCompany .doubleColumnNarrative {
    padding: 48px 12px
  }

  .aboutCompany .storySegment {
    padding: 24px
  }

  .aboutCompany .segmentHeading {
    font-size: 23px
  }

  .aboutCompany .testimonialWithMetrics {
    padding: 48px 12px;
    background-attachment: scroll
  }

  .aboutCompany .quoteArea {
    padding: 24px
  }

  .aboutCompany .quoteText {
    font-size: 15px
  }

  .aboutCompany .metricsStack {
    flex-direction: column
  }

  .aboutCompany .teamShowcase {
    padding: 48px 12px 24px
  }

  .aboutCompany .showcaseHeading {
    font-size: 31px;
    margin-bottom: 24px
  }

  .aboutCompany .teamGrid {
    grid-template-columns: 1fr
  }

  .aboutCompany .memberImageWrapper {
    height: 280px
  }
}

@media (max-width: 480px) {
  .aboutCompany .mainStatement {
    font-size: 23px
  }

  .aboutCompany .supportingText {
    font-size: 15px
  }

  .aboutCompany .metricNumber {
    font-size: 31px
  }

  .aboutCompany .showcaseHeading {
    font-size: 23px
  }
}

.contactPage {
  background: linear-gradient(180deg, #0a0a14 0%, #12121f 100%);
  color: #e8e8f0;
  min-height: 100vh;
  padding: 0;
  margin: 0
}

.contactPage .topBand {
  position: relative;
  background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
  padding: 48px 24px;
  border-bottom: 2px solid #964BEA;
  overflow: hidden
}

.contactPage .topBand::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #0295AB 50%, transparent 100%);
  opacity: .4
}

.contactPage .topBand::after {
  content: '';
  position: absolute;
  width: 300%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #964BEA 20%, #0295AB 40%, transparent 60%);
  bottom: 0;
  left: -100%;
  animation: colorWave 8s linear infinite
}

@keyframes colorWave {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(33.333%)
  }
}

.contactPage .topBandInner {
  max-width: 1320px;
  margin: 0 auto
}

.contactPage .mainHeading {
  font-size: 58px;
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -.02em
}

.contactPage .mainHeading .accentWord {
  position: relative;
  display: inline-block;
  color: #FFF
}

.contactPage .mainHeading .accentWord::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #964BEA 0%, #0295AB 100%);
  transform-origin: left;
  animation: drawLine 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

@keyframes drawLine {
  0% {
    transform: scaleX(0)
  }

  100% {
    transform: scaleX(1)
  }
}

.contactPage .subText {
  font-size: 23px;
  line-height: 1.6;
  color: #b8b8d0;
  margin: 0;
  max-width: 680px
}

.contactPage .dividerWithNumber {
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px 24px;
  display: flex;
  align-items: center;
  gap: 24px
}

.contactPage .dividerLine {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #964BEA 50%, transparent 100%)
}

.contactPage .dividerNum {
  font-size: 31px;
  line-height: 1.1;
  color: #0295AB;
  font-weight: 600;
  min-width: 48px;
  text-align: center
}

.contactPage .magazineLayout {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 96px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start
}

.contactPage .formColumn {
  position: relative
}

.contactPage .formContainer {
  position: relative;
  background: #1a1a2e99;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  padding: 48px;
  border: 1px solid #964bea33;
  box-shadow: -1px 10px 44px 1px #964bea1c;
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactPage .formContainer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #964BEA 0%, #0295AB 100%);
  border-radius: 12px 0 0 12px
}

.contactPage .formContainer:hover {
  transform: translateY(-4px);
  box-shadow: -1px 10px 44px 1px #964bea2e
}

.contactPage .formHeading {
  font-size: 43px;
  line-height: 1.1;
  margin: 0 0 8px;
  color: transparent;
  -webkit-text-stroke: 1.5px #FFF;
  text-stroke: 1.5px #FFF
}

.contactPage .formSubtext {
  font-size: 15px;
  line-height: 1.6;
  color: #b8b8d0;
  margin: 0 0 48px
}

.contactPage .formGroup {
  margin-bottom: 24px
}

.contactPage .formLabel {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  color: #e8e8f0;
  margin-bottom: 8px;
  font-weight: 500
}

.contactPage .formInput,
.contactPage .formSelect {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  line-height: 1.6;
  background: #0a0a14cc;
  border: 1px solid #964bea4d;
  border-radius: 3px;
  color: #e8e8f0;
  transition: border-color .28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1), background .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactPage .formInput::placeholder {
  color: #6a6a88;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .05em
}

.contactPage .formInput:focus,
.contactPage .formSelect:focus {
  outline: none;
  border-color: #0295AB;
  background: linear-gradient(135deg, #964bea14 0%, #0295ab14 100%);
  box-shadow: -1px 3px 5px 1px #0295ab0f
}

.contactPage .formSelect {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23964BEA' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px
}

.contactPage .formSelect:hover {
  border-color: #964BEA
}

.contactPage .privacyCheckbox {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px
}

.contactPage .privacyCheckbox input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #964BEA;
  flex-shrink: 0
}

.contactPage .privacyLabel {
  font-size: 15px;
  line-height: 1.6;
  color: #b8b8d0;
  cursor: pointer
}

.contactPage .privacyLabel a {
  color: #0295AB;
  text-decoration: none;
  border-bottom: 1px solid #0295ab66;
  transition: border-color .25s ease-in-out, color .25s ease-in-out
}

.contactPage .privacyLabel a:hover {
  color: #964BEA;
  border-bottom-color: #964BEA
}

.contactPage .submitButton {
  width: 100%;
  padding: 12px 24px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: linear-gradient(135deg, #964BEA 0%, #0295AB 100%);
  color: #FFF;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: transform .32s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow .32s cubic-bezier(0.4, 0, 0.2, 1), background .32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -1px 5px 18px 1px #964bea17
}

.contactPage .submitButton:hover {
  background: linear-gradient(135deg, #a85eff 0%, #03b3d1 100%);
  transform: translateY(-2px);
  box-shadow: -1px 10px 44px 1px #964bea1c
}

.contactPage .submitButton:active {
  transform: translateY(0)
}

.contactPage .submitButton:invalid {
  animation: shake .4s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0)
  }

  25% {
    transform: translateX(-8px)
  }

  75% {
    transform: translateX(8px)
  }
}

.contactPage .sideColumn {
  position: sticky;
  top: 24px
}

.contactPage .detailsCard {
  position: relative;
  background: #16162ab3;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 8px;
  padding: 48px 24px;
  border: 1px solid #0295ab33;
  box-shadow: -1px 5px 18px 1px #0295ab17;
  margin-bottom: 24px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactPage .detailsCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #0295AB
}

.contactPage .detailsCard::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 32px 32px;
  border-color: transparent transparent #964BEA;
  opacity: .4;
  transition: border-width .38s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.contactPage .detailsCard:hover::after {
  border-width: 0 0 48px 48px
}

.contactPage .detailsHeading {
  font-size: 31px;
  line-height: 1.35;
  margin: 0 0 24px;
  color: #FFF
}

.contactPage .detailItem {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #964bea26
}

.contactPage .detailItem:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none
}

.contactPage .detailItemLabel {
  font-size: 15px;
  line-height: 1.35;
  color: #6a6a88;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600
}

.contactPage .detailItemValue {
  font-size: 15px;
  line-height: 1.6;
  color: #e8e8f0;
  margin: 0
}

.contactPage .detailItemValue a {
  color: #e8e8f0;
  text-decoration: none;
  transition: color .27s ease-in-out
}

.contactPage .detailItemValue a:hover {
  color: #0295AB
}

.contactPage .metricsDisplay {
  position: relative;
  background: linear-gradient(135deg, #964bea1f 0%, #0295ab1f 100%);
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #964bea40;
  overflow: hidden
}

.contactPage .metricsDisplay::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #964BEA 100%);
  opacity: .6;
  transform: rotate(-45deg);
  transform-origin: right
}

.contactPage .metricRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px
}

.contactPage .metricRow:last-child {
  margin-bottom: 0
}

.contactPage .metricLabel {
  font-size: 15px;
  line-height: 1.35;
  color: #b8b8d0
}

.contactPage .metricValue {
  font-size: 23px;
  line-height: 1.1;
  color: #FFF;
  font-weight: 700;
  animation: countUp 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

@keyframes countUp {
  0% {
    opacity: 0;
    transform: translateY(8px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.contactPage .metricValue.highlight {
  color: #0295AB
}

@media (max-width: 1024px) {
  .contactPage .magazineLayout {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .contactPage .sideColumn {
    position: relative;
    top: 0
  }

  .contactPage .mainHeading {
    font-size: 43px
  }

  .contactPage .formContainer {
    padding: 24px
  }

  .contactPage .formHeading {
    font-size: 31px
  }
}

@media (max-width: 768px) {
  .contactPage .topBand {
    padding: 24px
  }

  .contactPage .mainHeading {
    font-size: 31px
  }

  .contactPage .subText {
    font-size: 15px
  }

  .contactPage .dividerWithNumber {
    padding: 24px
  }

  .contactPage .magazineLayout {
    padding: 0 24px 48px
  }

  .contactPage .formContainer {
    padding: 24px
  }

  .contactPage .formHeading {
    font-size: 23px
  }

  .contactPage .formSubtext {
    margin-bottom: 24px
  }

  .contactPage .detailsCard {
    padding: 24px
  }

  .contactPage .detailsHeading {
    font-size: 23px
  }
}

@media (max-width: 480px) {
  .contactPage .topBand {
    padding: 24px 12px
  }

  .contactPage .mainHeading {
    font-size: 23px
  }

  .contactPage .dividerWithNumber {
    padding: 24px 12px
  }

  .contactPage .magazineLayout {
    padding: 0 12px 48px
  }

  .contactPage .formContainer {
    padding: 24px 12px
  }

  .contactPage .detailsCard {
    padding: 24px 12px
  }
}

.successPage {
  background: linear-gradient(180deg, #0a0a12 0%, #1a0d2e 100%);
  min-height: 100vh;
  padding: 96px 24px;
  display: flex;
  align-items: center;
  justify-content: center
}

.successPage .successContainer {
  max-width: 680px;
  width: 100%;
  background: #0f0f19d9;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 12px;
  border-left: 3px solid #964BEA;
  padding: 48px;
  box-shadow: -1px 10px 44px 1px #964bea1c;
  position: relative
}

.successPage .iconWrapper {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.successPage .checkCircle {
  width: 96px;
  height: 96px;
  border: 4px solid #964BEA;
  border-radius: 999px;
  position: relative;
  background: radial-gradient(ellipse at center, #0295AB 0%, transparent 70%);
  animation: scaleIn .35s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

.successPage .checkMark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px
}

.successPage .checkMark::before,
.successPage .checkMark::after {
  content: '';
  position: absolute;
  background: #FFF;
  border-radius: 3px
}

.successPage .checkMark::before {
  width: 6px;
  height: 24px;
  bottom: 8px;
  left: 12px;
  transform: rotate(45deg);
  animation: drawShort .28s .15s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  transform-origin: bottom left;
  opacity: 0
}

.successPage .checkMark::after {
  width: 6px;
  height: 38px;
  bottom: 8px;
  right: 8px;
  transform: rotate(-45deg);
  animation: drawLong .32s .25s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  transform-origin: bottom right;
  opacity: 0
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0
  }

  100% {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes drawShort {
  0% {
    height: 0;
    opacity: 1
  }

  100% {
    height: 24px;
    opacity: 1
  }
}

@keyframes drawLong {
  0% {
    height: 0;
    opacity: 1
  }

  100% {
    height: 38px;
    opacity: 1
  }
}

.successPage .mainHeading {
  font-size: 43px;
  line-height: 1.1;
  color: #FFF;
  text-align: center;
  margin: 0 0 12px
}

.successPage .confirmationText {
  font-size: 23px;
  line-height: 1.35;
  color: #ffffffbf;
  text-align: center;
  margin: 0 0 48px
}

.successPage .detailsBox {
  background: #09091299;
  border-radius: 8px;
  padding: 24px;
  margin: 0 0 48px;
  border-left: 2px solid #0295AB
}

.successPage .detailsHeading {
  font-size: 23px;
  line-height: 1.35;
  color: #FFF;
  margin: 0 0 12px
}

.successPage .detailsParagraph {
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffb3;
  margin: 0 0 8px
}

.successPage .detailsParagraph:last-child {
  margin: 0
}

.successPage .contactInfo {
  font-size: 15px;
  line-height: 1.6;
  color: #0295AB;
  text-decoration: none;
  transition: color .27s cubic-bezier(0.4, 0, 0.2, 1)
}

.successPage .contactInfo:hover {
  color: #964BEA
}

.successPage .actionGroup {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap
}

.successPage .primaryButton {
  background: linear-gradient(135deg, #964BEA 0%, #0295AB 100%);
  color: #FFF;
  font-size: 15px;
  line-height: 1.35;
  padding: 12px 48px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform .29s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .29s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -1px 5px 18px 1px #964bea17
}

.successPage .primaryButton:hover {
  transform: translateY(-2px);
  box-shadow: -1px 10px 44px 1px #964bea1c
}

.successPage .secondaryButton {
  background: transparent;
  color: #ffffffd9;
  font-size: 15px;
  line-height: 1.35;
  padding: 12px 48px;
  border: 2px solid #fff3;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color .26s ease-in-out, color .26s ease-in-out
}

.successPage .secondaryButton:hover {
  border-color: #964BEA;
  color: #FFF
}

@media (max-width: 768px) {
  .successPage {
    padding: 48px 24px
  }

  .successPage .successContainer {
    padding: 24px
  }

  .successPage .mainHeading {
    font-size: 31px
  }

  .successPage .confirmationText {
    font-size: 15px;
    margin: 0 0 24px
  }

  .successPage .detailsBox {
    padding: 24px;
    margin: 0 0 24px
  }

  .successPage .actionGroup {
    flex-direction: column
  }

  .successPage .primaryButton,
  .successPage .secondaryButton {
    width: 100%;
    text-align: center
  }
}

@media (max-width: 480px) {
  .successPage .iconWrapper {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px
  }

  .successPage .checkCircle {
    width: 72px;
    height: 72px
  }

  .successPage .checkMark {
    width: 36px;
    height: 36px
  }

  .successPage .checkMark::before {
    height: 18px;
    left: 9px
  }

  .successPage .checkMark::after {
    height: 28px;
    right: 6px
  }

  @keyframes drawShort {
    0% {
      height: 0;
      opacity: 1
    }

    100% {
      height: 18px;
      opacity: 1
    }
  }

  @keyframes drawLong {
    0% {
      height: 0;
      opacity: 1
    }

    100% {
      height: 28px;
      opacity: 1
    }
  }
}

h1, h2, h3, h4, h5, h6 {word-break: break-word;}