@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap";

html {
  box-sizing: border-box;
  scroll-behavior: smooth
}

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

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: #1d1d1d;
  background-color: #fff
}

:focus {
  outline: 2px dashed #FF2015;
  outline-offset: 4px;
  animation: rotateDash 3.2s linear infinite
}

@keyframes rotateDash {
  0% {
    outline-offset: 4px
  }

  50% {
    outline-offset: 7px
  }

  100% {
    outline-offset: 4px
  }
}

header {
  position: relative;
  background: linear-gradient(135deg, #F6F7F8 0%, #fff 100%);
  border-bottom: 1px solid #ff20151f;
  box-shadow: -1px 1px 6px 0 #ff201514
}

.topstrip {
  background-color: #FF2015;
  padding: 16px 32px;
  display: flex;
  justify-content: center;
  align-items: center
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: center;
  max-width: 1320px;
  width: 100%
}

.topnav a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 16px;
  border-radius: 7px;
  transition: background-color .24s cubic-bezier(0.4, 0, 0.2, 1), color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.topnav a:hover {
  background-color: #ffffff2e;
  color: #F6F7F8
}

.topnav a:active {
  background-color: #ffffff47;
  transform: scale(0.97);
  transition: background-color .15s cubic-bezier(0.4, 0, 0.2, 1), transform .15s cubic-bezier(0.4, 0, 0.2, 1)
}

.brandzone {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px 32px;
  position: relative
}

.brandzone::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 72px;
  background: linear-gradient(180deg, #03C1CD 0%, #FF2015 100%);
  border-radius: 7px
}

.logowrap {
  background-color: #fff;
  padding: 16px;
  border-radius: 32px;
  box-shadow: -1px 7px 18px 0 #03c1cd1a;
  border: 2px solid #ff201514
}

.logowrap img {
  display: block;
  width: 62px;
  height: 62px;
  object-fit: contain
}

@media (max-width: 768px) {
  .topstrip {
    padding: 16px
  }

  .topnav {
    gap: 16px
  }

  .topnav a {
    font-size: 16px;
    padding: 8px
  }

  .brandzone {
    padding: 48px 16px
  }

  .brandzone::after {
    height: 56px
  }

  .logowrap {
    padding: 8px
  }

  .logowrap img {
    width: 48px;
    height: 48px
  }
}

@media (max-width: 360px) {
  .topnav {
    gap: 8px
  }

  .topnav a {
    font-size: 16px;
    padding: 4px 8px
  }
}

footer {
  position: relative;
  background: linear-gradient(135deg, #f6f7f8f2 0%, #ffffffeb 100%);
  backdrop-filter: blur(24px);
  border-top: 1px solid #03c1cd2e;
  padding: 96px 32px 32px;
  margin-top: 96px
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #FF2015 0%, #03C1CD 50%, #FF2015 100%);
  opacity: .3
}

.footergrid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 64px;
  margin-bottom: 64px
}

.footercol h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #FF2015;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid #03c1cd33
}

.footercol p {
  font-size: 16px;
  line-height: 1.7;
  color: #3d3d3d;
  margin: 0 0 16px
}

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

.footercol li {
  margin-bottom: 16px
}

.footercol a {
  font-size: 16px;
  color: #2d2d2d;
  text-decoration: none;
  transition: color .26s cubic-bezier(0.4, 0, 0.2, 1), padding-left .26s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block
}

.footercol a:hover {
  color: #FF2015;
  padding-left: 8px
}

.footercol a:active {
  color: #03C1CD
}

.contactdetail {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px
}

.contactdetail svg {
  width: 24px;
  height: 24px;
  margin-right: 16px;
  flex-shrink: 0
}

.contactdetail a {
  color: #2d2d2d;
  text-decoration: none;
  transition: color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactdetail a:hover {
  color: #FF2015;
  padding-left: 0
}

.footerlogowrap {
  background-color: #fff9;
  padding: 8px;
  border-radius: 7px;
  display: inline-block;
  box-shadow: -1px 1px 6px 0 #ff201514;
  margin-bottom: 16px
}

.footerlogowrap img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain
}

.footerbottom {
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid #03c1cd26;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px
}

.copyright {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: #5d5d5d;
  margin: 0
}

.footerlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0
}

.footerlinks a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: #4d4d4d;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 7px;
  transition: background-color .24s cubic-bezier(0.4, 0, 0.2, 1), color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.footerlinks a:hover {
  background-color: #ff201514;
  color: #FF2015;
  padding-left: 8px
}

.footerlinks a:active {
  background-color: #03c1cd1f;
  color: #03C1CD
}

.preferenceslink {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: #4d4d4d;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.preferenceslink:hover {
  color: #FF2015;
  text-decoration-thickness: 2px
}

@media (max-width: 768px) {
  footer {
    padding: 64px 16px 32px;
    margin-top: 64px
  }

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

  .footerbottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
  }

  .footerlinks {
    flex-direction: column;
    gap: 16px
  }
}

.consentbox {
  position: fixed;
  top: 32px;
  left: 32px;
  width: 480px;
  max-width: calc(100vw - 64px);
  background: linear-gradient(135deg, #fff 0%, #F6F7F8 100%);
  border-radius: 32px;
  padding: 32px;
  box-shadow: -1px 9px 44px 0 #ff20151f;
  border: 2px solid #03c1cd2e;
  z-index: 4000;
  display: none;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .18s cubic-bezier(0.4, 0, 0.2, 1), transform .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.consentbox.visible {
  opacity: 1;
  transform: translateY(0)
}

.consenticon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px
}

.consenttext {
  font-size: 16px;
  line-height: 1.7;
  color: #2d2d2d;
  margin: 0 0 32px
}

.consentactions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center
}

.acceptbutton {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background-color: #FF2015;
  border: none;
  border-radius: 7px;
  padding: 16px 32px;
  cursor: pointer;
  transition: background-color .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -1px 1px 6px 0 #ff201514
}

.acceptbutton:hover {
  background-color: #d91b12;
  box-shadow: -1px 7px 18px 0 #ff20151a
}

.acceptbutton:active {
  background-color: #b81610;
  transform: scale(0.98)
}

.declinelink {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: #4d4d4d;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.declinelink:hover {
  color: #FF2015;
  text-decoration-thickness: 2px
}

.declinelink:active {
  color: #03C1CD
}

.preferencesview {
  display: none
}

.preferencesview.active {
  display: block
}

.preferenceoption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #f6f7f899;
  border-radius: 7px;
  border: 1px solid #03c1cd1f
}

.preferencelabel {
  font-size: 16px;
  font-weight: 500;
  color: #2d2d2d
}

.toggleswitch {
  position: relative;
  width: 56px;
  height: 32px;
  background-color: #d0d0d0;
  border-radius: 48px;
  cursor: pointer;
  transition: background-color .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.toggleswitch.active {
  background-color: #03C1CD
}

.toggleswitch::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 48px;
  transition: transform .26s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -1px 1px 6px 0 #00000026
}

.toggleswitch.active::after {
  transform: translateX(24px)
}

.backlink {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: #4d4d4d;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-top: 16px;
  display: inline-block;
  transition: color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.backlink:hover {
  color: #FF2015;
  text-decoration-thickness: 2px
}

.savebutton {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background-color: #03C1CD;
  border: none;
  border-radius: 7px;
  padding: 16px 32px;
  cursor: pointer;
  margin-top: 16px;
  transition: background-color .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -1px 1px 6px 0 #03c1cd14
}

.savebutton:hover {
  background-color: #02a8b3;
  box-shadow: -1px 7px 18px 0 #03c1cd1a
}

.savebutton:active {
  background-color: #028f99;
  transform: scale(0.98)
}

@media (max-width: 768px) {
  .consentbox {
    top: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    padding: 24px
  }

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

  .acceptbutton {
    width: 100%
  }
}

@media (max-width: 360px) {
  .consentbox {
    padding: 16px
  }

  .consenticon {
    width: 32px;
    height: 32px
  }
}

.content-doc-zmi {
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px 32px;
  background: #fff
}

.content-doc-zmi h1 {
  font-size: 62px;
  line-height: 1.15;
  margin: 0 0 64px;
  color: #1a1a2e;
  letter-spacing: -.02em
}

.content-doc-zmi h2 {
  font-size: 44px;
  line-height: 1.15;
  margin: 96px 0 32px;
  color: #1a1a2e;
  letter-spacing: -.01em
}

.content-doc-zmi h3 {
  font-size: 32px;
  line-height: 1.45;
  margin: 64px 0 24px;
  color: #2a2a3e
}

.content-doc-zmi h4 {
  font-size: 24px;
  line-height: 1.45;
  margin: 48px 0 16px;
  color: #2a2a3e
}

.content-doc-zmi h5 {
  font-size: 18px;
  line-height: 1.45;
  margin: 32px 0 16px;
  color: #3a3a4e;
  text-transform: uppercase;
  letter-spacing: .05em
}

.content-doc-zmi h6 {
  font-size: 16px;
  line-height: 1.45;
  margin: 32px 0 16px;
  color: #3a3a4e;
  text-transform: uppercase;
  letter-spacing: .05em
}

.content-doc-zmi h1:first-child,
.content-doc-zmi h2:first-child,
.content-doc-zmi h3:first-child {
  margin-top: 0
}

.content-doc-zmi p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 32px;
  color: #4a4a5e
}

.content-doc-zmi ul,
.content-doc-zmi ol {
  margin: 0 0 32px;
  padding: 0 0 0 32px
}

.content-doc-zmi li {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 16px;
  color: #4a4a5e
}

.content-doc-zmi li:last-child {
  margin-bottom: 0
}

.content-doc-zmi ul ul,
.content-doc-zmi ol ol,
.content-doc-zmi ul ol,
.content-doc-zmi ol ul {
  margin-top: 16px;
  margin-bottom: 16px
}

.content-doc-zmi strong,
.content-doc-zmi b {
  color: #2a2a3e;
  font-weight: 600
}

.content-doc-zmi a {
  color: #FF2015;
  text-decoration: none;
  border-bottom: 1px solid #ff20154d;
  transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.content-doc-zmi a:hover {
  border-bottom-color: #FF2015
}

.content-doc-zmi a:focus {
  outline: 2px solid #FF2015;
  outline-offset: 2px;
  border-radius: 2px
}

.content-doc-zmi table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 64px;
  font-size: 16px;
  line-height: 1.45;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: -1px 1px 6px 0 #ff201514 -1px 7px 18px 0 #ff20151a
}

.content-doc-zmi thead {
  background: #F6F7F8
}

.content-doc-zmi th {
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #2a2a3e;
  border-bottom: 2px solid #ff201526
}

.content-doc-zmi td {
  padding: 16px;
  color: #4a4a5e;
  border-bottom: 1px solid #0000000f
}

.content-doc-zmi tbody tr:last-child td {
  border-bottom: none
}

.content-doc-zmi tbody tr:hover {
  background: #f6f7f880
}

.content-doc-zmi hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, #FF2015 0%, #03C1CD 100%);
  margin: 96px 0;
  border-radius: 7px
}

.content-doc-zmi div {
  margin: 0 0 32px
}

@media (max-width: 1024px) {
  .content-doc-zmi {
    padding: 64px 32px
  }

  .content-doc-zmi h1 {
    font-size: 44px;
    margin-bottom: 48px
  }

  .content-doc-zmi h2 {
    font-size: 32px;
    margin-top: 64px;
    margin-bottom: 24px
  }

  .content-doc-zmi h3 {
    font-size: 24px;
    margin-top: 48px
  }
}

@media (max-width: 768px) {
  .content-doc-zmi {
    padding: 48px 16px
  }

  .content-doc-zmi h1 {
    font-size: 32px;
    margin-bottom: 32px
  }

  .content-doc-zmi h2 {
    font-size: 24px;
    margin-top: 48px;
    margin-bottom: 16px
  }

  .content-doc-zmi h3 {
    font-size: 18px;
    margin-top: 32px
  }

  .content-doc-zmi h4 {
    font-size: 18px;
    margin-top: 32px
  }

  .content-doc-zmi p,
  .content-doc-zmi li {
    font-size: 16px
  }

  .content-doc-zmi table {
    font-size: 14px;
    margin-bottom: 48px
  }

  .content-doc-zmi th,
  .content-doc-zmi td {
    padding: 12px 8px
  }

  .content-doc-zmi hr {
    margin: 64px 0
  }
}

@media (max-width: 360px) {
  .content-doc-zmi {
    padding: 32px 16px
  }

  .content-doc-zmi h1 {
    font-size: 24px
  }

  .content-doc-zmi h2 {
    font-size: 18px
  }

  .content-doc-zmi table {
    display: block;
    overflow-x: auto
  }
}

.aboutpage {
  background: #F6F7F8;
  overflow-x: clip
}

.aboutpage .topblock {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 32px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
  position: relative
}

.aboutpage .topblock::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 48px;
  background: #F6F7F8;
  clip-path: polygon(0 20px, 10% 15px, 20% 25px, 30% 18px, 40% 28px, 50% 22px, 60% 32px, 70% 26px, 80% 36px, 90% 30px, 100% 40px, 100% 100%, 0 100%)
}

.aboutpage .topleft {
  display: flex;
  flex-direction: column;
  gap: 32px
}

.aboutpage .topleft h1 {
  font-size: 62px;
  line-height: 1.15;
  color: #1a1a2e;
  margin: 0;
  font-weight: 700
}

.aboutpage .topleft .desc {
  font-size: 18px;
  line-height: 1.7;
  color: #2d2d44;
  margin: 0
}

.aboutpage .topleft .linkrow {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.aboutpage .topleft .linkrow a {
  font-size: 16px;
  color: #FF2015;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid #FF2015;
  transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpage .topleft .linkrow a:hover {
  color: #03C1CD;
  border-bottom-color: #03C1CD
}

.aboutpage .topright {
  position: relative
}

.aboutpage .topright img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 32px;
  object-fit: cover;
  box-shadow: -1px 7px 18px 0 #ff20151a;
  transition: box-shadow .72s cubic-bezier(0.0, 0, 0.2, 1)
}

.aboutpage .topright img:hover {
  box-shadow: -1px 7px 18px 0 #ff20151a inset 0 0 96px 32px #0006
}

.aboutpage .storyblock {
  background: linear-gradient(127deg, #ff201508 0%, #03c1cd0d 100%);
  padding: 96px 32px;
  position: relative
}

.aboutpage .storyblock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 15% 25%, #ff201514 0%, transparent 50%), radial-gradient(ellipse at 85% 75%, #03c1cd14 0%, transparent 50%);
  pointer-events: none
}

.aboutpage .storyblock .storywrap {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.aboutpage .storyblock h2 {
  font-size: 44px;
  line-height: 1.15;
  color: #1a1a2e;
  margin: 0 0 64px;
  font-weight: 700;
  text-align: center
}

.aboutpage .storyblock .storyitems {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1.2fr 0.8fr;
  gap: 32px
}

.aboutpage .storyitem {
  background: #fff;
  padding: 32px;
  border-radius: 32px;
  box-shadow: -1px 1px 6px 0 #03c1cd14;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 3px solid transparent;
  transition: border-color .68s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .68s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  animation: storyreveal .85s cubic-bezier(0.0, 0, 0.2, 1) backwards
}

.aboutpage .storyitem:nth-child(1) {
  animation-delay: .1s
}

.aboutpage .storyitem:nth-child(2) {
  animation-delay: .2s
}

.aboutpage .storyitem:nth-child(3) {
  animation-delay: .3s
}

.aboutpage .storyitem:nth-child(4) {
  animation-delay: .4s
}

@keyframes storyreveal {
  from {
    opacity: 0;
    transform: rotate(-3deg) translateY(32px)
  }

  to {
    opacity: 1;
    transform: rotate(0deg) translateY(0)
  }
}

.aboutpage .storyitem::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 32px;
  padding: 3px;
  background: linear-gradient(135deg, #FF2015, #03C1CD);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .68s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpage .storyitem:hover::before {
  opacity: 1
}

.aboutpage .storyitem:hover {
  box-shadow: -1px 9px 44px 0 #03c1cd1f
}

.aboutpage .storyitem .year {
  font-size: 32px;
  line-height: 1.15;
  color: #FF2015;
  font-weight: 700;
  margin: 0
}

.aboutpage .storyitem h3 {
  font-size: 24px;
  line-height: 1.45;
  color: #1a1a2e;
  margin: 0;
  font-weight: 700
}

.aboutpage .storyitem p {
  font-size: 16px;
  line-height: 1.7;
  color: #2d2d44;
  margin: 0
}

.aboutpage .valuesblock {
  background: #fff;
  padding: 96px 32px;
  position: relative
}

.aboutpage .valuesblock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, #0000001f 100%);
  pointer-events: none
}

.aboutpage .valueswrap {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.aboutpage .valuesblock h2 {
  font-size: 44px;
  line-height: 1.15;
  color: #1a1a2e;
  margin: 0 0 64px;
  font-weight: 700
}

.aboutpage .valuegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  position: relative
}

.aboutpage .valuegrid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 16.666%;
  right: 16.666%;
  height: 2px;
  background: linear-gradient(90deg, #FF2015 0%, #03C1CD 100%);
  transform: translateY(-50%);
  z-index: 0
}

.aboutpage .valueitem {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1
}

.aboutpage .valueicon {
  width: 96px;
  height: 96px;
  border-radius: 48px;
  background: linear-gradient(135deg, #FF2015, #03C1CD);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -1px 7px 18px 0 #ff20151a;
  transition: transform .72s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .72s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpage .valueitem:hover .valueicon {
  transform: scale(1.12);
  box-shadow: -1px 9px 44px 0 #ff20151f
}

.aboutpage .valueicon svg {
  width: 48px;
  height: 48px;
  fill: #fff
}

.aboutpage .valueitem h3 {
  font-size: 24px;
  line-height: 1.45;
  color: #1a1a2e;
  margin: 0;
  font-weight: 700
}

.aboutpage .valueitem p {
  font-size: 16px;
  line-height: 1.7;
  color: #2d2d44;
  margin: 0
}

.aboutpage .teamblock {
  background: #F6F7F8;
  padding: 96px 32px
}

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

.aboutpage .teamblock h2 {
  font-size: 44px;
  line-height: 1.15;
  color: #1a1a2e;
  margin: 0 0 32px;
  font-weight: 700
}

.aboutpage .teamintro {
  font-size: 18px;
  line-height: 1.7;
  color: #2d2d44;
  margin: 0 0 64px;
  max-width: 896px
}

.aboutpage .teamgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px
}

.aboutpage .teammember {
  display: grid;
  grid-template-columns: 256px 1fr;
  gap: 32px;
  align-items: start
}

.aboutpage .memberphoto {
  position: relative;
  overflow: hidden;
  border-radius: 7px
}

.aboutpage .memberphoto img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform .78s cubic-bezier(0.0, 0, 0.2, 1)
}

.aboutpage .teammember:hover .memberphoto img {
  transform: scale(1.08)
}

.aboutpage .memberinfo {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.aboutpage .memberinfo h3 {
  font-size: 24px;
  line-height: 1.45;
  color: #1a1a2e;
  margin: 0;
  font-weight: 700
}

.aboutpage .memberrole {
  font-size: 16px;
  line-height: 1.45;
  color: #03C1CD;
  margin: 0;
  font-weight: 600
}

.aboutpage .memberbio {
  font-size: 16px;
  line-height: 1.7;
  color: #2d2d44;
  margin: 0
}

.aboutpage .memberlist {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.aboutpage .memberlist li {
  font-size: 16px;
  line-height: 1.7;
  color: #2d2d44;
  padding-left: 32px;
  position: relative
}

.aboutpage .memberlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: linear-gradient(180deg, #FF2015, #03C1CD);
  border-radius: 7px
}

.aboutpage .metricblock {
  background: linear-gradient(127deg, #03c1cd0d 0%, #ff201508 100%);
  padding: 96px 32px;
  position: relative;
  overflow: hidden
}

.aboutpage .metricwrap {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.aboutpage .metricgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px
}

.aboutpage .metriccard {
  background: #fff;
  padding: 32px;
  border-radius: 32px;
  box-shadow: -1px 1px 6px 0 #ff201514;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  transition: transform .68s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .68s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutpage .metriccard:hover {
  transform: translateY(-8px);
  box-shadow: -1px 9px 44px 0 #ff20151f
}

.aboutpage .metricnum {
  font-size: 62px;
  line-height: 1.15;
  color: #FF2015;
  margin: 0;
  font-weight: 700
}

.aboutpage .metriclabel {
  font-size: 18px;
  line-height: 1.45;
  color: #1a1a2e;
  margin: 0;
  font-weight: 600
}

.aboutpage .metricdesc {
  font-size: 16px;
  line-height: 1.7;
  color: #2d2d44;
  margin: 0
}

.aboutpage .metricseparator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0
}

.aboutpage .metricarrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center
}

.aboutpage .metricarrow svg {
  width: 32px;
  height: 32px;
  fill: #03C1CD
}

@media (max-width: 1024px) {
  .aboutpage .topblock {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 64px 32px
  }

  .aboutpage .topleft h1 {
    font-size: 44px
  }

  .aboutpage .storyblock .storyitems {
    grid-template-columns: repeat(2, 1fr)
  }

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

  .aboutpage .valuegrid::before {
    display: none
  }

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

  .aboutpage .metricgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 768px) {
  .aboutpage .topblock {
    padding: 48px 16px
  }

  .aboutpage .topleft h1 {
    font-size: 32px
  }

  .aboutpage .topleft .desc {
    font-size: 16px
  }

  .aboutpage .storyblock {
    padding: 64px 16px
  }

  .aboutpage .storyblock h2 {
    font-size: 32px;
    margin-bottom: 48px
  }

  .aboutpage .storyblock .storyitems {
    grid-template-columns: 1fr
  }

  .aboutpage .valuesblock {
    padding: 64px 16px
  }

  .aboutpage .valuesblock h2 {
    font-size: 32px;
    margin-bottom: 48px
  }

  .aboutpage .teamblock {
    padding: 64px 16px
  }

  .aboutpage .teamblock h2 {
    font-size: 32px
  }

  .aboutpage .teammember {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .aboutpage .metricblock {
    padding: 64px 16px
  }

  .aboutpage .metricgrid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 360px) {
  .aboutpage .topblock {
    padding: 32px 16px
  }

  .aboutpage .topleft h1 {
    font-size: 24px
  }

  .aboutpage .storyitem {
    padding: 24px
  }

  .aboutpage .storyitem .year {
    font-size: 24px
  }

  .aboutpage .storyitem h3 {
    font-size: 18px
  }

  .aboutpage .valueicon {
    width: 72px;
    height: 72px
  }

  .aboutpage .valueicon svg {
    width: 36px;
    height: 36px
  }

  .aboutpage .metricnum {
    font-size: 44px
  }
}

.contactpage {
  background: #F6F7F8;
  min-height: 100vh;
  padding: 0;
  margin: 0
}

.contactpage .titlezone {
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px 32px;
  display: flex;
  align-items: center;
  gap: 64px;
  position: relative;
  border-bottom: 1px solid #ff201526
}

.contactpage .titlezone::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #FF2015 0%, #03C1CD 100%);
  opacity: .4
}

.contactpage .titlecontent {
  flex: 1;
  min-width: 0
}

.contactpage .eyebrow {
  font-size: 16px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #03C1CD;
  margin: 0 0 16px;
  font-weight: 600
}

.contactpage .maintitle {
  font-size: 62px;
  line-height: 1.15;
  margin: 0;
  color: #1a1a2e;
  font-weight: 900
}

.contactpage .imagecard {
  width: 420px;
  height: 280px;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: -1px 7px 18px 0 #ff20151a
}

.contactpage .imagecard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #FF2015;
  opacity: .15;
  z-index: 1;
  pointer-events: none
}

.contactpage .imagecard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.contactpage .divider {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px
}

.contactpage .diamond {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #FF2015 0%, #03C1CD 100%);
  transform: rotate(45deg);
  opacity: .6
}

.contactpage .formzone {
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px 32px;
  position: relative
}

.contactpage .formzone::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, #03c1cd14 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pulseradial 8s cubic-bezier(0.4, 0, 0.2, 1) infinite
}

@keyframes pulseradial {

  0%,
  100% {
    opacity: .6
  }

  50% {
    opacity: 1
  }
}

.contactpage .formwrapper {
  background: #fff;
  border-radius: 48px;
  padding: 64px;
  box-shadow: -1px 9px 44px 0 #03c1cd1f;
  position: relative;
  z-index: 1
}

.contactpage .formheader {
  margin: 0 0 48px;
  text-align: center
}

.contactpage .formtitle {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #1a1a2e;
  font-weight: 800
}

.contactpage .formdesc {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  color: #4a4a5e
}

.contactpage .contactform {
  display: grid;
  gap: 32px
}

.contactpage .fieldgroup {
  display: grid;
  gap: 8px
}

.contactpage .fieldlabel {
  font-size: 16px;
  line-height: 1.45;
  color: #2a2a3e;
  font-weight: 600;
  display: block
}

.contactpage .fieldinput {
  width: 100%;
  padding: 16px 24px;
  border: 2px solid #e0e0e8;
  border-radius: 7px;
  font-size: 16px;
  line-height: 1.45;
  color: #1a1a2e;
  background: #fff;
  transition: border-color .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px #03c1cd0d
}

.contactpage .fieldinput::placeholder {
  color: #9a9aaa;
  opacity: 1;
  transition: opacity .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .fieldinput:focus {
  outline: none;
  border-color: #03C1CD;
  box-shadow: inset 0 1px 3px #03c1cd1a 0 0 0 3px #03c1cd1f
}

.contactpage .fieldinput:focus::placeholder {
  opacity: 0
}

.contactpage .fieldtextarea {
  min-height: 140px;
  resize: vertical;
  font-family: inherit
}

.contactpage .interestgroup {
  display: grid;
  gap: 16px
}

.contactpage .interestgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px
}

.contactpage .checkboxwrap {
  position: relative
}

.contactpage .checkboxinput {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.contactpage .checkboxlabel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border: 2px solid #e0e0e8;
  border-radius: 7px;
  font-size: 16px;
  line-height: 1.45;
  color: #2a2a3e;
  background: #fff;
  cursor: pointer;
  transition: all .22s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none
}

.contactpage .checkboxlabel::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid #e0e0e8;
  border-radius: 7px;
  flex-shrink: 0;
  transition: all .22s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff
}

.contactpage .checkboxinput:checked+.checkboxlabel {
  border-color: #03C1CD;
  background: #03c1cd0a
}

.contactpage .checkboxinput:checked+.checkboxlabel::before {
  background: #03C1CD;
  border-color: #03C1CD;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center
}

.contactpage .checkboxlabel:hover {
  border-color: #03C1CD;
  box-shadow: -1px 1px 6px 0 #03c1cd14
}

.contactpage .privacywrap {
  display: flex;
  align-items: flex-start;
  gap: 12px
}

.contactpage .privacyinput {
  margin-top: 4px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #03C1CD;
  flex-shrink: 0
}

.contactpage .privacylabel {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a5e;
  cursor: pointer;
  user-select: none
}

.contactpage .privacylink {
  color: #03C1CD;
  text-decoration: none;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .privacylink:hover {
  color: #FF2015;
  text-decoration: underline
}

.contactpage .submitbtn {
  width: 100%;
  padding: 20px 48px;
  background: #FF2015;
  color: #fff;
  border: 3px solid #FF2015;
  border-radius: 7px;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: all .26s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -1px 7px 18px 0 #ff20151a;
  position: relative
}

.contactpage .submitbtn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 3px solid #FF2015;
  border-radius: 7px;
  opacity: 0;
  transition: opacity .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .submitbtn:hover {
  background: #d91812;
  border-color: #d91812;
  transform: translateY(-2px);
  box-shadow: -1px 9px 44px 0 #ff20151f
}

.contactpage .submitbtn:hover::before {
  opacity: 1
}

.contactpage .submitbtn:active {
  transform: translateY(0)
}

.contactpage .infozone {
  background: #fff;
  position: relative;
  overflow: hidden
}

.contactpage .infozone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ff201508 0%, #03c1cd08 100%);
  animation: colorshift 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none
}

@keyframes colorshift {

  0%,
  100% {
    opacity: .4
  }

  50% {
    opacity: 1
  }
}

.contactpage .infocontent {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 32px;
  position: relative;
  z-index: 1
}

.contactpage .infogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px
}

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

.contactpage .iconwrap {
  width: 72px;
  height: 72px;
  border-radius: 32px;
  background: linear-gradient(135deg, #ff20151a 0%, #03c1cd1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -1px 1px 6px 0 #03c1cd14
}

.contactpage .iconsvg {
  width: 36px;
  height: 36px;
  fill: #FF2015
}

.contactpage .cardtitle {
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
  color: #1a1a2e;
  font-weight: 700
}

.contactpage .cardtext {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  color: #4a4a5e
}

.contactpage .cardlink {
  color: #03C1CD;
  text-decoration: none;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
  word-break: break-word
}

.contactpage .cardlink:hover {
  color: #FF2015;
  text-decoration: underline
}

.contactpage .pricezone {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 32px
}

.contactpage .pricetitle {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 64px;
  color: #1a1a2e;
  font-weight: 800;
  text-align: center
}

.contactpage .pricetable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: -1px 9px 44px 0 #03c1cd1f
}

.contactpage .pricetable thead {
  background: linear-gradient(135deg, #FF2015 0%, #03C1CD 100%)
}

.contactpage .pricetable th {
  padding: 24px 32px;
  font-size: 18px;
  line-height: 1.45;
  color: #fff;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em
}

.contactpage .pricetable tbody tr {
  border-bottom: 1px solid #e0e0e8;
  transition: background-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactpage .pricetable tbody tr:last-child {
  border-bottom: none
}

.contactpage .pricetable tbody tr:hover {
  background: #03c1cd08
}

.contactpage .pricetable td {
  padding: 24px 32px;
  font-size: 16px;
  line-height: 1.7;
  color: #2a2a3e
}

.contactpage .pricetable td:first-child {
  font-weight: 600;
  color: #1a1a2e
}

.contactpage .dotlabel {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.contactpage .colordot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0
}

.contactpage .dot1 {
  background: #FF2015
}

.contactpage .dot2 {
  background: #03C1CD
}

.contactpage .dot3 {
  background: #F6F7F8;
  border: 2px solid #03C1CD
}

@media (max-width: 1024px) {
  .contactpage .titlezone {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding: 48px 32px
  }

  .contactpage .imagecard {
    width: 100%;
    max-width: 500px
  }

  .contactpage .maintitle {
    font-size: 44px
  }

  .contactpage .formwrapper {
    padding: 48px 32px
  }

  .contactpage .formtitle {
    font-size: 32px
  }

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

  .contactpage .pricetable {
    font-size: 14px
  }

  .contactpage .pricetable th,
  .contactpage .pricetable td {
    padding: 16px 24px
  }
}

@media (max-width: 768px) {
  .contactpage .titlezone {
    padding: 32px 16px;
    gap: 32px
  }

  .contactpage .maintitle {
    font-size: 32px
  }

  .contactpage .imagecard {
    height: 220px
  }

  .contactpage .formzone {
    padding: 48px 16px
  }

  .contactpage .formwrapper {
    padding: 32px 24px;
    border-radius: 32px
  }

  .contactpage .formtitle {
    font-size: 24px
  }

  .contactpage .interestgrid {
    grid-template-columns: 1fr
  }

  .contactpage .infocontent {
    padding: 64px 16px
  }

  .contactpage .pricezone {
    padding: 64px 16px
  }

  .contactpage .pricetitle {
    font-size: 32px;
    margin-bottom: 48px
  }

  .contactpage .pricetable {
    display: block;
    overflow-x: auto
  }

  .contactpage .pricetable thead,
  .contactpage .pricetable tbody,
  .contactpage .pricetable tr,
  .contactpage .pricetable th,
  .contactpage .pricetable td {
    display: block
  }

  .contactpage .pricetable thead {
    display: none
  }

  .contactpage .pricetable tr {
    margin-bottom: 16px;
    border: 1px solid #e0e0e8;
    border-radius: 7px;
    overflow: hidden
  }

  .contactpage .pricetable td {
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e8
  }

  .contactpage .pricetable td:last-child {
    border-bottom: none
  }

  .contactpage .pricetable td:first-child {
    background: #03c1cd0d;
    font-weight: 700
  }
}

@media (max-width: 360px) {
  .contactpage .titlezone {
    padding: 32px 16px
  }

  .contactpage .maintitle {
    font-size: 24px
  }

  .contactpage .formwrapper {
    padding: 24px 16px
  }

  .contactpage .formtitle {
    font-size: 24px
  }

  .contactpage .submitbtn {
    padding: 16px 32px
  }
}

.philant {
  background: #FFF;
  overflow-x: clip
}

.philant .titlezone {
  background: linear-gradient(137deg, #ff201508 0%, #03c1cd0a 48%, #f6f7f80d 100%), repeating-linear-gradient(45deg, transparent, transparent 32px, #ff201505 32px, #ff201505 64px);
  padding: 96px 32px;
  position: relative;
  overflow: hidden
}

.philant .titlezone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 23% 17%, #03c1cd14 0%, transparent 42%), radial-gradient(circle at 78% 83%, #ff20150f 0%, transparent 38%), radial-gradient(circle at 51% 49%, #f6f7f81f 0%, transparent 55%);
  pointer-events: none
}

.philant .titlezone .contain {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.philant .titlezone h1 {
  font-size: 72px;
  line-height: 1.15;
  margin: 0 0 32px;
  color: #1A1A1A;
  font-weight: 800;
  letter-spacing: -.02em;
  animation: elasticentry 870ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  opacity: 0;
  transform: translateY(64px) scale(0.92)
}

@keyframes elasticentry {
  0% {
    opacity: 0;
    transform: translateY(64px) scale(0.92)
  }

  60% {
    opacity: 1;
    transform: translateY(-8px) scale(1.03)
  }

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

.philant .titlezone .thesisgroup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 840px
}

.philant .titlezone .thesisitem {
  font-size: 18px;
  line-height: 1.7;
  color: #2C2C2C;
  padding: 0 0 0 24px;
  position: relative;
  animation: elasticentry 870ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  opacity: 0;
  transform: translateY(64px) scale(0.92)
}

.philant .titlezone .thesisitem:nth-child(1) {
  animation-delay: 150ms
}

.philant .titlezone .thesisitem:nth-child(2) {
  animation-delay: 280ms
}

.philant .titlezone .thesisitem:nth-child(3) {
  animation-delay: 410ms
}

.philant .titlezone .thesisitem::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #FF2015 0%, #03C1CD 100%);
  border-radius: 7px
}

.philant .waveshape {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 96px;
  z-index: 2
}

.philant .waveshape svg {
  display: block;
  width: 100%;
  height: 100%
}

.philant .impactgrid {
  background: #FFF;
  padding: 96px 32px;
  position: relative
}

.philant .impactgrid .contain {
  max-width: 1320px;
  margin: 0 auto
}

.philant .impactgrid .sectionlabel {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 64px;
  color: #1A1A1A;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center
}

.philant .impactgrid .cardrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin: 0 0 64px
}

.philant .impactgrid .impactcard {
  background: linear-gradient(167deg, #FFF 0%, #f6f7f899 100%);
  border: 1px solid #ff20151f;
  border-radius: 32px;
  padding: 32px;
  box-shadow: -1px 7px 18px 0 #ff20151a;
  transition: transform 720ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 720ms cubic-bezier(0.4, 0, 0.2, 1), border-color 720ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden
}

.philant .impactgrid .impactcard::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #FF2015 0%, #03C1CD 100%);
  border-radius: 32px;
  opacity: 0;
  transition: opacity 720ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1
}

.philant .impactgrid .impactcard:hover {
  transform: translateY(-8px);
  box-shadow: -1px 9px 44px 0 #03c1cd1f;
  border-color: #03c1cd3d
}

.philant .impactgrid .impactcard:hover::before {
  opacity: .18
}

.philant .impactgrid .cardicon {
  width: 64px;
  height: 64px;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff201514 0%, #03c1cd14 100%);
  border-radius: 48px;
  transition: transform 720ms cubic-bezier(0.4, 0, 0.2, 1)
}

.philant .impactgrid .impactcard:hover .cardicon {
  transform: rotate(12deg) scale(1.1)
}

.philant .impactgrid .cardicon svg {
  width: 32px;
  height: 32px
}

.philant .impactgrid .cardtitle {
  font-size: 24px;
  line-height: 1.45;
  margin: 0 0 16px;
  color: #1A1A1A;
  font-weight: 800
}

.philant .impactgrid .carddesc {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: #3A3A3A
}

.philant .impactgrid .pathwrap {
  position: relative;
  margin: 64px 0 0
}

.philant .impactgrid .dashedpath {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0
}

.philant .impactgrid .dashedpath svg {
  width: 100%;
  height: 100%
}

.philant .impactgrid .dashedpath path {
  fill: none;
  stroke: #03C1CD;
  stroke-width: 2;
  stroke-dasharray: 12 8;
  opacity: .3;
  stroke-linecap: round
}

.philant .impactgrid .statementbox {
  background: linear-gradient(147deg, #ff20150a 0%, #03c1cd0f 100%);
  border-radius: 32px;
  padding: 32px;
  border: 2px solid #03c1cd29;
  position: relative;
  z-index: 1
}

.philant .impactgrid .statementbox p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  color: #2C2C2C
}

.philant .focusarea {
  background: linear-gradient(217deg, #f6f7f866 0%, #ff201505 52%, #03c1cd08 100%);
  padding: 96px 32px;
  position: relative
}

.philant .focusarea .contain {
  max-width: 1320px;
  margin: 0 auto
}

.philant .focusarea .areahdr {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 32px;
  color: #1A1A1A;
  font-weight: 900;
  text-align: center
}

.philant .focusarea .areasubhdr {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 auto 64px;
  color: #2C2C2C;
  text-align: center;
  max-width: 780px
}

.philant .focusarea .processwrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 64px;
  overflow-x: auto;
  padding: 16px 0
}

.philant .focusarea .processblock {
  background: #FFF;
  border: 1px solid #ff201524;
  border-radius: 32px;
  padding: 32px;
  min-width: 240px;
  flex-shrink: 0;
  box-shadow: -1px 7px 18px 0 #ff20151a;
  position: relative;
  transition: transform 720ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 720ms cubic-bezier(0.4, 0, 0.2, 1)
}

.philant .focusarea .processblock:hover {
  transform: translateY(-4px);
  box-shadow: -1px 9px 44px 0 #ff20151f
}

.philant .focusarea .processnum {
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #FF2015;
  font-weight: 900
}

.philant .focusarea .processtitle {
  font-size: 18px;
  line-height: 1.45;
  margin: 0 0 8px;
  color: #1A1A1A;
  font-weight: 800
}

.philant .focusarea .processdesc {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: #3A3A3A
}

.philant .focusarea .arrowconnect {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center
}

.philant .focusarea .arrowconnect svg {
  width: 24px;
  height: 24px;
  fill: #03C1CD
}

.philant .focusarea .contentpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start
}

.philant .focusarea .textcol h3 {
  font-size: 32px;
  line-height: 1.45;
  margin: 0 0 24px;
  color: #1A1A1A;
  font-weight: 900
}

.philant .focusarea .textcol p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 16px;
  color: #2C2C2C
}

.philant .focusarea .textcol p:last-child {
  margin: 0
}

.philant .focusarea .imagecol {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: -1px 9px 44px 0 #03c1cd1f
}

.philant .focusarea .imagecol img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 840ms cubic-bezier(0.4, 0, 0.2, 1)
}

.philant .focusarea .imagecol:hover img {
  transform: scale(1.06)
}

.philant .commitlist {
  background: #FFF;
  padding: 96px 32px;
  position: relative
}

.philant .commitlist .contain {
  max-width: 1320px;
  margin: 0 auto
}

.philant .commitlist .listhdr {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 64px;
  color: #1A1A1A;
  font-weight: 900;
  text-align: center
}

.philant .commitlist .itemstack {
  display: flex;
  flex-direction: column;
  gap: 32px
}

.philant .commitlist .commititem {
  border-left: 4px solid #FF2015;
  padding: 0 0 0 32px;
  position: relative;
  transition: border-color 720ms cubic-bezier(0.4, 0, 0.2, 1), padding-left 720ms cubic-bezier(0.4, 0, 0.2, 1)
}

.philant .commitlist .commititem:hover {
  border-left-color: #03C1CD;
  padding-left: 40px
}

.philant .commitlist .commititem h4 {
  font-size: 24px;
  line-height: 1.45;
  margin: 0 0 16px;
  color: #1A1A1A;
  font-weight: 800
}

.philant .commitlist .commititem p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: #2C2C2C
}

.philant .dividertriangle {
  position: relative;
  height: 96px;
  overflow: hidden
}

.philant .dividertriangle svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 96px
}

@media (max-width: 1024px) {
  .philant .titlezone {
    padding: 64px 32px
  }

  .philant .titlezone h1 {
    font-size: 62px
  }

  .philant .impactgrid,
  .philant .focusarea,
  .philant .commitlist {
    padding: 64px 32px
  }

  .philant .impactgrid .sectionlabel,
  .philant .focusarea .areahdr,
  .philant .commitlist .listhdr {
    font-size: 32px
  }

  .philant .focusarea .contentpair {
    grid-template-columns: 1fr;
    gap: 32px
  }
}

@media (max-width: 768px) {
  .philant .titlezone {
    padding: 64px 16px
  }

  .philant .titlezone h1 {
    font-size: 44px
  }

  .philant .titlezone .thesisitem {
    font-size: 16px
  }

  .philant .impactgrid,
  .philant .focusarea,
  .philant .commitlist {
    padding: 64px 16px
  }

  .philant .impactgrid .cardrow {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .philant .impactgrid .sectionlabel,
  .philant .focusarea .areahdr,
  .philant .commitlist .listhdr {
    font-size: 24px;
    margin-bottom: 32px
  }

  .philant .focusarea .processwrap {
    flex-direction: column;
    align-items: stretch
  }

  .philant .focusarea .processblock {
    min-width: 100%
  }

  .philant .focusarea .arrowconnect {
    transform: rotate(90deg)
  }

  .philant .commitlist .commititem {
    padding-left: 24px
  }

  .philant .commitlist .commititem:hover {
    padding-left: 28px
  }
}

@media (max-width: 360px) {
  .philant .titlezone h1 {
    font-size: 32px
  }

  .philant .impactgrid .cardtitle,
  .philant .commitlist .commititem h4 {
    font-size: 18px
  }
}

.svcpg {
  background: #F6F7F8;
  overflow-x: clip
}

.svcpg .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 280px;
  position: relative;
  overflow: hidden
}

.svcpg .split_left {
  background: #FF2015;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  position: relative
}

.svcpg .split_right {
  background: #03C1CD;
  position: relative;
  overflow: hidden
}

.svcpg .split_right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.7);
  mask-image: linear-gradient(to bottom, #00000080 0%, #000f 100%);
  -webkit-mask-image: linear-gradient(to bottom, #00000080 0%, #000f 100%)
}

.svcpg .split_content {
  max-width: 660px;
  position: relative;
  z-index: 2
}

.svcpg .split_content h1 {
  font-size: 44px;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em
}

.svcpg .split_content p {
  font-size: 18px;
  line-height: 1.45;
  color: #fff;
  margin: 0;
  opacity: .95
}

.svcpg .split_deco {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 48px;
  background: #ffffff14;
  top: -60px;
  right: -60px;
  transform: rotate(25deg);
  pointer-events: none
}

.svcpg .offerings {
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 32px;
  position: relative
}

.svcpg .offerings_grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 32px;
  margin-bottom: 64px
}

.svcpg .offering_card {
  background: #fff;
  border-radius: 32px;
  padding: 32px;
  box-shadow: -1px 7px 18px 0 #ff20151a;
  transition: transform .72s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .72s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden
}

.svcpg .offering_card:hover {
  transform: translateY(-8px);
  box-shadow: -1px 9px 44px 0 #ff20151f
}

.svcpg .offering_card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(94deg, #FF2015 0%, #03C1CD 100%);
  opacity: 0;
  transition: opacity .68s cubic-bezier(0.4, 0, 0.2, 1)
}

.svcpg .offering_card:hover::before {
  opacity: 1
}

.svcpg .offering_icon {
  width: 64px;
  height: 64px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ff20151a 0%, #03c1cd1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px
}

.svcpg .offering_icon svg {
  width: 32px;
  height: 32px;
  fill: #FF2015
}

.svcpg .offering_card h3 {
  font-size: 24px;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: -.01em
}

.svcpg .offering_card p {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0
}

.svcpg .offerings_intro {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 64px
}

.svcpg .offerings_intro h2 {
  font-size: 44px;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 24px;
  font-weight: 900;
  letter-spacing: -.02em
}

.svcpg .offerings_intro p {
  font-size: 18px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0
}

.svcpg .process {
  background: #fff;
  position: relative;
  padding: 96px 0
}

.svcpg .process::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: #F6F7F8;
  border-radius: 0 0 50% 50%
}

.svcpg .process_inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative
}

.svcpg .process_layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start
}

.svcpg .process_steps {
  display: flex;
  flex-direction: column;
  gap: 32px
}

.svcpg .step_item {
  background: linear-gradient(117deg, #F6F7F8 0%, #fff 100%);
  border-radius: 7px;
  padding: 32px;
  position: relative;
  border-left: 4px solid transparent;
  transition: border-color .76s cubic-bezier(0.4, 0, 0.2, 1), background .76s cubic-bezier(0.4, 0, 0.2, 1)
}

.svcpg .step_item:hover {
  border-left-color: #FF2015;
  background: #fff
}

.svcpg .step_num {
  font-size: 62px;
  line-height: 1;
  color: #03C1CD;
  font-weight: 900;
  margin: 0 0 16px;
  opacity: .2;
  transition: opacity .64s cubic-bezier(0.4, 0, 0.2, 1)
}

.svcpg .step_item:hover .step_num {
  opacity: .4
}

.svcpg .step_item h4 {
  font-size: 24px;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: -.01em
}

.svcpg .step_item p {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0
}

.svcpg .process_sidebar {
  position: sticky;
  top: 32px
}

.svcpg .process_sidebar h2 {
  font-size: 32px;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 24px;
  font-weight: 900;
  letter-spacing: -.01em
}

.svcpg .process_sidebar p {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0 0 32px
}

.svcpg .metric_box {
  background: linear-gradient(142deg, #ff20150d 0%, #03c1cd0d 100%);
  border-radius: 32px;
  padding: 32px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  animation: bgpulse 8s cubic-bezier(0.4, 0, 0.2, 1) infinite
}

@keyframes bgpulse {

  0%,
  100% {
    background: linear-gradient(142deg, #ff20150d 0%, #03c1cd0d 100%)
  }

  50% {
    background: linear-gradient(142deg, #03c1cd0d 0%, #ff20150d 100%)
  }
}

.svcpg .metric_value {
  font-size: 44px;
  line-height: 1;
  color: #FF2015;
  font-weight: 900;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px
}

.svcpg .metric_arrow {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 16px solid #03C1CD;
  animation: arrowbounce 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite
}

@keyframes arrowbounce {

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

  50% {
    transform: translateY(-8px)
  }
}

.svcpg .metric_label {
  font-size: 16px;
  line-height: 1.45;
  color: #4a4a4a;
  margin: 0
}

.svcpg .commitment {
  background: radial-gradient(ellipse at 28% 42%, #ff201514 0%, transparent 50%), radial-gradient(ellipse at 78% 65%, #03c1cd14 0%, transparent 50%), #F6F7F8;
  padding: 96px 32px;
  position: relative
}

.svcpg .commitment_inner {
  max-width: 1320px;
  margin: 0 auto;
  position: relative
}

.svcpg .commitment_header {
  text-align: center;
  margin-bottom: 64px;
  position: relative
}

.svcpg .commitment_header h2 {
  font-size: 44px;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: -.02em
}

.svcpg .divider_ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0
}

.svcpg .divider_line {
  height: 2px;
  width: 120px;
  background: linear-gradient(90deg, transparent 0%, #FF2015 50%, transparent 100%)
}

.svcpg .divider_center {
  width: 16px;
  height: 16px;
  background: #03C1CD;
  border-radius: 48px;
  position: relative
}

.svcpg .divider_center::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #FF2015;
  border-radius: 48px;
  opacity: .3
}

.svcpg .commitment_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px
}

.svcpg .commitment_card {
  background: #fff;
  border-radius: 7px;
  padding: 32px;
  box-shadow: -1px 1px 6px 0 #03c1cd14;
  transition: box-shadow .84s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative
}

.svcpg .commitment_card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  border: 2px solid transparent;
  transition: border-color .76s cubic-bezier(0.4, 0, 0.2, 1)
}

.svcpg .commitment_card:hover {
  box-shadow: -1px 9px 44px 0 #03c1cd1f
}

.svcpg .commitment_card:hover::after {
  border-color: #03c1cd33
}

.svcpg .commitment_card h4 {
  font-size: 24px;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: -.01em
}

.svcpg .commitment_card p {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0
}

.svcpg .commitment_card ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0
}

.svcpg .commitment_card li {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0 0 8px;
  padding-left: 24px;
  position: relative;
  border-left: 3px solid #03C1CD;
  padding-left: 16px
}

.svcpg .commitment_card li:last-child {
  margin-bottom: 0
}

@media (max-width: 1024px) {
  .svcpg .split {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .svcpg .split_left {
    padding: 64px 32px
  }

  .svcpg .split_right {
    min-height: 240px
  }

  .svcpg .split_content h1 {
    font-size: 32px
  }

  .svcpg .offerings_grid {
    grid-template-columns: 1fr
  }

  .svcpg .offerings_intro h2 {
    font-size: 32px
  }

  .svcpg .process_layout {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .svcpg .process_sidebar {
    position: static
  }

  .svcpg .commitment_header h2 {
    font-size: 32px
  }

  .svcpg .commitment_grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 768px) {
  .svcpg .split_content h1 {
    font-size: 24px
  }

  .svcpg .split_content p {
    font-size: 16px
  }

  .svcpg .offerings {
    padding: 64px 16px
  }

  .svcpg .offerings_intro {
    margin-bottom: 32px
  }

  .svcpg .offerings_intro h2 {
    font-size: 24px
  }

  .svcpg .offerings_grid {
    gap: 16px;
    margin-bottom: 32px
  }

  .svcpg .offering_card {
    padding: 24px
  }

  .svcpg .offering_card h3 {
    font-size: 18px
  }

  .svcpg .process {
    padding: 64px 0
  }

  .svcpg .process_inner {
    padding: 0 16px
  }

  .svcpg .process_sidebar h2 {
    font-size: 24px
  }

  .svcpg .step_item {
    padding: 24px
  }

  .svcpg .step_num {
    font-size: 44px
  }

  .svcpg .step_item h4 {
    font-size: 18px
  }

  .svcpg .commitment {
    padding: 64px 16px
  }

  .svcpg .commitment_header {
    margin-bottom: 32px
  }

  .svcpg .commitment_header h2 {
    font-size: 24px
  }

  .svcpg .divider_line {
    width: 60px
  }

  .svcpg .commitment_card {
    padding: 24px
  }

  .svcpg .commitment_card h4 {
    font-size: 18px
  }

  .svcpg .metric_value {
    font-size: 32px
  }
}

@media (max-width: 360px) {
  .svcpg .split_left {
    padding: 32px 16px
  }

  .svcpg .offerings {
    padding: 32px 16px
  }

  .svcpg .process {
    padding: 32px 0
  }

  .svcpg .commitment {
    padding: 32px 16px
  }

  .svcpg .offering_card,
  .svcpg .step_item,
  .svcpg .commitment_card {
    padding: 16px
  }
}

.svcpg input::placeholder {
  transition: opacity .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.svcpg input:focus::placeholder {
  opacity: 0
}

.portl {
  max-width: 1320px;
  margin: 0 auto;
  background: #fff
}

.portl .openlead {
  position: relative;
  padding: 96px 32px 64px;
  overflow: hidden;
  background: linear-gradient(127deg, #F6F7F8 0%, #f6f7f866 100%)
}

.portl .openlead::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, #03c1cd1f 0%, transparent 70%);
  border-radius: 48px;
  animation: portlRotate 24s linear infinite
}

.portl .openlead::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, #ff201514 0%, transparent 70%);
  border-radius: 48px;
  animation: portlRotate 32s linear infinite reverse;
  pointer-events: none
}

@keyframes portlRotate {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

.portl .leadgrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2
}

.portl .leadtxt h1 {
  font-size: 62px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #1a1a2e;
  font-weight: 800;
  letter-spacing: -.02em
}

.portl .leadtxt h1 .accent {
  color: #FF2015
}

.portl .leadtxt .sub {
  font-size: 24px;
  line-height: 1.45;
  color: #4a4a5e;
  margin: 0 0 32px
}

.portl .leadtxt .linkact {
  display: inline-block;
  font-size: 18px;
  color: #03C1CD;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  position: relative;
  padding-bottom: 4px;
  transition: color .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.portl .leadtxt .linkact::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #03C1CD;
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left
}

.portl .leadtxt .linkact:hover {
  color: #FF2015
}

.portl .leadtxt .linkact:hover::after {
  background: #FF2015;
  transform: scaleX(1.1)
}

.portl .leadvis {
  position: relative
}

.portl .leadvis::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  background: linear-gradient(180deg, #ff20154d 0%, #03c1cd26 100%);
  border-radius: 32px;
  z-index: 1;
  pointer-events: none
}

.portl .leadvis img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 32px;
  position: relative;
  z-index: 2;
  box-shadow: -1px 9px 44px 0 #ff20151f
}

.portl .patdeco {
  position: absolute;
  top: 32px;
  right: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  opacity: .4;
  pointer-events: none
}

.portl .patdeco span {
  width: 8px;
  height: 8px;
  background: #03C1CD;
  border-radius: 48px
}

.portl .exclude {
  padding: 96px 32px;
  background: #fff;
  position: relative
}

.portl .exclude::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: url("data:image/svg+xml,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 12.5 0,25 10 T 50 10 T 75 10 T 100 10 L 100 20 L 0 20 Z' fill='%23F6F7F8'/%3E%3C/svg%3E") repeat-x;
  background-size: 100px 20px;
  pointer-events: none
}

.portl .exclude h2 {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 64px;
  color: #1a1a2e;
  font-weight: 800;
  text-align: center
}

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

.portl .bounditem {
  background: #F6F7F8;
  padding: 32px;
  border-radius: 32px;
  position: relative;
  transition: transform .26s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.portl .bounditem:hover {
  transform: translateY(-8px);
  box-shadow: -1px 9px 44px 0 #03c1cd1f
}

.portl .bounditem::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #FF2015 0%, #03C1CD 100%);
  border-radius: 7px 0 0 7px
}

.portl .bounditem h3 {
  font-size: 24px;
  line-height: 1.45;
  margin: 0 0 16px;
  color: #1a1a2e;
  font-weight: 700
}

.portl .bounditem p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: #4a4a5e
}

.portl .audience {
  padding: 96px 32px;
  background: linear-gradient(217deg, #03c1cd0d 0%, #f6f7f899 45%, #ff20150d 100%);
  position: relative
}

.portl .audience::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: url("data:image/svg+xml,%3Csvg width='120' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 15 2,30 10 T 60 10 Q 75 18,90 10 T 120 10 L 120 20 L 0 20 Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x;
  background-size: 120px 20px;
  pointer-events: none
}

.portl .audiencewrap {
  max-width: 960px;
  margin: 0 auto
}

.portl .audience h2 {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 32px;
  color: #1a1a2e;
  font-weight: 800
}

.portl .audience .intro {
  font-size: 18px;
  line-height: 1.7;
  color: #4a4a5e;
  margin: 0 0 64px
}

.portl .profgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px
}

.portl .profcard {
  background: #fff;
  padding: 32px;
  border-radius: 32px;
  box-shadow: -1px 7px 18px 0 #03c1cd1a;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  transition: box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.portl .profcard:hover {
  box-shadow: -1px 9px 44px 0 #03c1cd1f
}

.portl .profcard img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 32px;
  flex-shrink: 0
}

.portl .profcontent h3 {
  font-size: 24px;
  line-height: 1.45;
  margin: 0 0 8px;
  color: #1a1a2e;
  font-weight: 700
}

.portl .profcontent .role {
  font-size: 16px;
  color: #03C1CD;
  margin: 0 0 16px;
  font-weight: 600
}

.portl .profcontent p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: #4a4a5e
}

.portl .proof {
  padding: 96px 32px;
  background: #fff;
  position: relative
}

.portl .proof::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: url("data:image/svg+xml,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 20 0,40 10 T 80 10 T 100 10 L 100 20 L 0 20 Z' fill='%23F6F7F8'/%3E%3C/svg%3E") repeat-x;
  background-size: 100px 20px;
  pointer-events: none;
  opacity: .6
}

.portl .proof h2 {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 64px;
  color: #1a1a2e;
  font-weight: 800;
  text-align: center
}

.portl .metricrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 64px
}

.portl .metricbox {
  background: linear-gradient(135deg, #F6F7F8 0%, #fff 100%);
  padding: 32px;
  border-radius: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: -1px 1px 6px 0 #ff201514
}

.portl .metricbox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF2015 0%, #03C1CD 100%)
}

.portl .metricnum {
  font-size: 44px;
  line-height: 1.15;
  color: #FF2015;
  font-weight: 800;
  margin: 0 0 8px;
  animation: portlPulse 3s ease-in-out infinite
}

.portl .metricbox:nth-child(2) .metricnum {
  animation-delay: .75s
}

.portl .metricbox:nth-child(3) .metricnum {
  animation-delay: 1.5s
}

.portl .metricbox:nth-child(4) .metricnum {
  animation-delay: 2.25s
}

@keyframes portlPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .7
  }
}

.portl .metriclabel {
  font-size: 16px;
  line-height: 1.45;
  color: #4a4a5e;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em
}

.portl .casegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px
}

.portl .casebox {
  background: #F6F7F8;
  border-radius: 32px;
  overflow: hidden;
  transition: transform .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.portl .casebox:hover {
  transform: scale(1.02)
}

.portl .casebox img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block
}

.portl .casetxt {
  padding: 32px
}

.portl .casetxt h3 {
  font-size: 24px;
  line-height: 1.45;
  margin: 0 0 16px;
  color: #1a1a2e;
  font-weight: 700
}

.portl .casetxt p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: #4a4a5e
}

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

  .portl .leadtxt h1 {
    font-size: 44px
  }

  .portl .leadvis img {
    height: 360px
  }

  .portl .boundgrid {
    grid-template-columns: 1fr
  }

  .portl .profgrid {
    grid-template-columns: 1fr
  }

  .portl .metricrow {
    grid-template-columns: repeat(2, 1fr)
  }

  .portl .casegrid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 768px) {
  .portl .openlead {
    padding: 64px 16px 48px
  }

  .portl .leadtxt h1 {
    font-size: 32px
  }

  .portl .leadtxt .sub {
    font-size: 18px
  }

  .portl .leadvis img {
    height: 280px
  }

  .portl .exclude {
    padding: 64px 16px
  }

  .portl .exclude h2 {
    font-size: 32px;
    margin-bottom: 48px
  }

  .portl .bounditem {
    padding: 24px
  }

  .portl .audience {
    padding: 64px 16px
  }

  .portl .audience h2 {
    font-size: 32px
  }

  .portl .profcard {
    flex-direction: column;
    padding: 24px
  }

  .portl .profcard img {
    width: 100%;
    height: 240px
  }

  .portl .proof {
    padding: 64px 16px
  }

  .portl .proof h2 {
    font-size: 32px;
    margin-bottom: 48px
  }

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

  .portl .metricbox {
    padding: 24px
  }

  .portl .metricnum {
    font-size: 32px
  }

  .portl .casetxt {
    padding: 24px
  }

  .portl .casebox img {
    height: 220px
  }
}

@media (max-width: 360px) {
  .portl .leadtxt h1 {
    font-size: 24px
  }

  .portl .leadtxt .sub {
    font-size: 16px
  }

  .portl .exclude h2,
  .portl .audience h2,
  .portl .proof h2 {
    font-size: 24px
  }

  .portl .bounditem h3,
  .portl .profcontent h3,
  .portl .casetxt h3 {
    font-size: 18px
  }
}

.successpage {
  background: linear-gradient(217deg, #F6F7F8 0%, #fff 48%, #F6F7F8 100%);
  padding: 96px 16px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center
}

.successpage .confirmwrap {
  max-width: 680px;
  margin: 0 auto;
  text-align: center
}

.successpage .iconzone {
  width: 128px;
  height: 128px;
  margin: 0 auto 32px;
  position: relative
}

.successpage .checkring {
  width: 128px;
  height: 128px;
  border: 4px solid #03C1CD;
  border-radius: 50%;
  position: relative;
  background: #fff;
  box-shadow: -1px 7px 18px 0 #03c1cd1a;
  animation: ringpulse .85s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

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

  60% {
    transform: scale(1.08)
  }

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

.successpage .checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px
}

.successpage .checkmark svg {
  width: 100%;
  height: 100%;
  stroke: #FF2015;
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: drawcheck .7s cubic-bezier(0.4, 0, 0.2, 1) .25s forwards
}

@keyframes drawcheck {
  to {
    stroke-dashoffset: 0
  }
}

.successpage .primaryhead {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #1a1a2e;
  font-weight: 700
}

.successpage .statusmsg {
  font-size: 18px;
  line-height: 1.7;
  color: #4a4a5e;
  margin: 0 0 32px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto
}

.successpage .detailbox {
  background: #fff;
  border-radius: 32px;
  padding: 32px;
  margin: 0 0 32px;
  box-shadow: -1px 1px 6px 0 #ff201514;
  border: 1px solid #F6F7F8
}

.successpage .detailhead {
  font-size: 18px;
  line-height: 1.45;
  margin: 0 0 16px;
  color: #1a1a2e;
  font-weight: 700
}

.successpage .detaillist {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left
}

.successpage .detaillist li {
  font-size: 16px;
  line-height: 1.7;
  color: #4a4a5e;
  padding: 8px 0 8px 32px;
  position: relative;
  border-left: 3px solid #03C1CD;
  margin: 0 0 8px 16px
}

.successpage .detaillist li:last-child {
  margin-bottom: 0
}

.successpage .actionzone {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap
}

.successpage .primarybtn {
  background: linear-gradient(135deg, #FF2015 0%, #d91a12 100%);
  color: #fff;
  font-size: 16px;
  line-height: 1.45;
  padding: 16px 32px;
  border: none;
  border-radius: 48px;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-weight: 700;
  box-shadow: -1px 7px 18px 0 #ff20151a;
  transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.successpage .primarybtn:hover {
  transform: translateY(-2px);
  box-shadow: -1px 9px 44px 0 #ff20151f
}

.successpage .secondarybtn {
  background: transparent;
  color: #03C1CD;
  font-size: 16px;
  line-height: 1.45;
  padding: 16px 32px;
  border: 2px solid #03C1CD;
  border-radius: 48px;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-weight: 700;
  transition: border-width .26s cubic-bezier(0.4, 0, 0.2, 1), padding .26s cubic-bezier(0.4, 0, 0.2, 1), background .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.successpage .secondarybtn:hover {
  border-width: 3px;
  padding: 15px 31px;
  background: #03c1cd0d
}

.successpage .refcode {
  font-size: 16px;
  line-height: 1.7;
  color: #7a7a8e;
  margin: 32px 0 0
}

.successpage .refcode strong {
  color: #1a1a2e;
  font-weight: 700
}

@media (max-width: 768px) {
  .successpage {
    padding: 64px 16px
  }

  .successpage .primaryhead {
    font-size: 32px
  }

  .successpage .iconzone {
    width: 96px;
    height: 96px;
    margin-bottom: 24px
  }

  .successpage .checkring {
    width: 96px;
    height: 96px
  }

  .successpage .checkmark {
    width: 42px;
    height: 42px
  }

  .successpage .detailbox {
    padding: 24px
  }

  .successpage .actionzone {
    flex-direction: column;
    gap: 8px
  }

  .successpage .primarybtn,
  .successpage .secondarybtn {
    width: 100%
  }
}

@media (max-width: 360px) {
  .successpage .primaryhead {
    font-size: 24px
  }

  .successpage .statusmsg {
    font-size: 16px
  }
}