@import "https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;1,400;0,700;1,700&display=swap";

* {
  box-sizing: border-box
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  background: #000;
  color: #EEF1F3;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  line-height: 1.65
}

.hdr {
  background: linear-gradient(135deg, #1a1a1d 0%, #0a0a0c 100%);
  border-bottom: 1px solid #0c99d626;
  position: relative;
  z-index: 100
}

.hdr__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px
}

.brand {
  display: flex;
  align-items: center;
  gap: 20px;
  order: 2
}

.brand__mark {
  width: 60px;
  height: 60px;
  padding: 10px;
  background: #0c99d614;
  border-bottom: 2px solid #0C99D6;
  border-radius: 3px;
  box-shadow: 0 4px 18px 0 #0c99d61c;
  transition: background .22s ease-out, box-shadow .22s ease-out
}

.brand__mark:hover {
  background: #0c99d624;
  box-shadow: 0 8px 44px 0 #0c99d621
}

.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

.brand__label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #EEF1F3;
  letter-spacing: 0
}

.nav {
  order: 1;
  flex: 1
}

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

.nav__item {
  position: relative;
  padding: 0 20px;
  border-right: 1px solid #0c99d640
}

.nav__item:last-child {
  border-right: none
}

.nav__link {
  display: inline-block;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  color: #EEF1F3;
  text-decoration: none;
  transition: color .18s ease-out;
  position: relative
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0C99D6 0%, #961223 100%);
  transition: width .25s ease-out
}

.nav__link:hover {
  color: #0C99D6
}

.nav__link:hover::after {
  width: 100%
}

.nav__link:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0c99d666;
  border-radius: 3px
}

@media (max-width: 900px) {
  .hdr__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px
  }

  .brand {
    order: 1;
    justify-content: center
  }

  .nav {
    order: 2
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0
  }

  .nav__item {
    border-right: none;
    border-bottom: 1px solid #0c99d640;
    padding: 0
  }

  .nav__item:last-child {
    border-bottom: none
  }

  .nav__link {
    display: block;
    padding: 20px;
    text-align: center
  }
}

.ftr {
  background: linear-gradient(180deg, #050506 0%, #0d0d0f 100%);
  border-top: 1px solid #96122333;
  position: relative;
  margin-top: 80px
}

.ftr__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px 40px
}

.ftr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-bottom: 80px
}

.ftr-col {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.ftr-col__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #0C99D6;
  margin: 0 0 10px
}

.ftr-brand {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.ftr-brand__mark {
  width: 60px;
  height: 60px;
  padding: 10px;
  background: #9612231f;
  border-bottom: 2px solid #961223;
  border-radius: 3px;
  box-shadow: 0 2px 4px 0 #9612230d
}

.ftr-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

.ftr-brand__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #EEF1F3
}

.ftr-info {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ftr-info__item {
  font-size: 16px;
  line-height: 1.65;
  color: #eef1f3d9
}

.ftr-info__link {
  color: #0C99D6;
  text-decoration: none;
  transition: color .2s ease-out
}

.ftr-info__link:hover {
  color: #961223
}

.ftr-info__link:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0c99d666;
  border-radius: 3px
}

.ftr-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ftr-menu__link {
  display: inline-block;
  font-size: 16px;
  line-height: 1.65;
  color: #eef1f3d9;
  text-decoration: none;
  transition: color .19s ease-out, padding-left .19s ease-out;
  padding-left: 0
}

.ftr-menu__link:hover {
  color: #0C99D6;
  padding-left: 10px
}

.ftr-menu__link:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0c99d666;
  border-radius: 3px
}

.ftr__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #0c99d64d 50%, transparent 100%);
  margin-bottom: 40px
}

.ftr__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px
}

.ftr__copy {
  font-size: 13px;
  line-height: 1.45;
  color: #eef1f399
}

.ftr__tagline {
  font-size: 13px;
  line-height: 1.45;
  color: #eef1f380;
  font-style: italic
}

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

  .ftr__bottom {
    flex-direction: column;
    align-items: flex-start
  }
}

.consent {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: linear-gradient(135deg, #1a1a1d 0%, #0d0d0f 100%);
  border: 1px solid #0c99d64d;
  border-radius: 3px;
  padding: 20px;
  max-width: 480px;
  box-shadow: 0 8px 44px 0 #0c99d621;
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .28s ease-out, transform .28s ease-out
}

.consent.is-visible {
  opacity: 1;
  transform: translateY(0)
}

.consent__txt {
  font-size: 13px;
  line-height: 1.65;
  color: #eef1f3e6;
  margin: 0 0 20px
}

.consent__actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap
}

.consent__btn {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #0C99D6;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  transition: color .17s ease-out
}

.consent__btn:hover {
  color: #961223
}

.consent__btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0c99d666;
  border-radius: 3px
}

.consent__view {
  display: none
}

.consent__view.is-active {
  display: block
}

.consent__prefs {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #0c99d633
}

.consent__category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px;
  background: #0c99d60d;
  border-radius: 3px
}

.consent__category-label {
  font-size: 13px;
  line-height: 1.45;
  color: #eef1f3e6;
  flex: 1
}

.consent__toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: #eef1f333;
  border-radius: 32px;
  cursor: pointer;
  transition: background .2s ease-out;
  border: none;
  padding: 0
}

.consent__toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #EEF1F3;
  border-radius: 32px;
  transition: left .2s ease-out
}

.consent__toggle.is-on {
  background: #0C99D6
}

.consent__toggle.is-on::after {
  left: 23px
}

.consent__toggle:disabled {
  opacity: .5;
  cursor: not-allowed
}

.consent__toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0c99d666
}

.consent__back {
  margin-top: 20px
}

@media (max-width: 600px) {
  .consent {
    left: 20px;
    right: 20px;
    max-width: none
  }

  .consent__actions {
    flex-direction: column;
    gap: 10px
  }
}

.policy-p-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px;
  background: #0a0a0a;
  color: #EEF1F3
}

.policy-p-content h1 {
  font-size: 52px;
  line-height: 1.2;
  margin-bottom: 40px;
  color: #EEF1F3
}

.policy-p-content h2 {
  font-size: 20px;
  line-height: 1.45;
  margin-top: 80px;
  margin-bottom: 20px;
  color: #0C99D6
}

.policy-p-content h3 {
  font-size: 16px;
  line-height: 1.45;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #EEF1F3
}

.policy-p-content h4,
.policy-p-content h5,
.policy-p-content h6 {
  font-size: 16px;
  line-height: 1.45;
  margin-top: 40px;
  margin-bottom: 10px;
  color: #EEF1F3
}

.policy-p-content p {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 20px;
  color: #EEF1F3
}

.policy-p-content em,
.policy-p-content i {
  font-style: italic;
  color: #EEF1F3
}

.policy-p-content a {
  color: #0C99D6;
  text-decoration: none;
  border-bottom: 1px solid #0c99d64d;
  transition: border-color .18s ease-out, color .18s ease-out
}

.policy-p-content a:hover {
  color: #3db3e8;
  border-bottom-color: #3db3e8
}

.policy-p-content table {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 40px;
  border-collapse: collapse;
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 18px 0 #0c99d61c
}

.policy-p-content thead {
  background: #242424
}

.policy-p-content th {
  padding: 20px;
  text-align: left;
  font-size: 16px;
  line-height: 1.45;
  color: #0C99D6;
  border-bottom: 2px solid #2a2a2a
}

.policy-p-content td {
  padding: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: #EEF1F3;
  border-bottom: 1px solid #2a2a2a
}

.policy-p-content tbody tr:last-child td {
  border-bottom: none
}

.policy-p-content tbody tr {
  transition: background-color .2s ease-out
}

.policy-p-content tbody tr:hover {
  background: #202020
}

.policy-p-content hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #0c99d64d, transparent);
  margin: 80px 0
}

.policy-p-content div {
  margin-bottom: 20px
}

@media (max-width: 768px) {
  .policy-p-content {
    padding: 40px 20px
  }

  .policy-p-content h1 {
    font-size: 20px;
    margin-bottom: 20px
  }

  .policy-p-content h2 {
    font-size: 16px;
    margin-top: 40px
  }

  .policy-p-content h3,
  .policy-p-content h4,
  .policy-p-content h5,
  .policy-p-content h6 {
    font-size: 13px;
    margin-top: 20px
  }

  .policy-p-content p {
    font-size: 13px
  }

  .policy-p-content table {
    display: block;
    overflow-x: auto;
    margin-top: 20px;
    margin-bottom: 20px
  }

  .policy-p-content th,
  .policy-p-content td {
    padding: 10px;
    font-size: 13px
  }

  .policy-p-content hr {
    margin: 40px 0
  }
}

.o-us {
  background: #000;
  color: #EEF1F3;
  overflow-x: clip
}

.o-us__intro {
  position: relative;
  padding: 80px 20px;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden
}

.o-us__intro-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: center
}

.o-us__intro-visual {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 8px 44px 0 #0c99d621
}

.o-us__intro-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s ease-out
}

.o-us__intro-visual:hover .o-us__intro-img {
  transform: scale(1.08) translateX(-15px)
}

.o-us__intro-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(0deg, #0c99d6bf 0%, transparent 100%);
  pointer-events: none;
  z-index: 1
}

.o-us__intro-txt {
  position: relative
}

.o-us__intro-label {
  font-size: 13px;
  color: #0C99D6;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 20px;
  opacity: .9
}

.o-us__intro-heading {
  font-size: 52px;
  line-height: 1.2;
  margin: 0 0 40px;
  color: #EEF1F3
}

.o-us__intro-heading-accent {
  color: #0C99D6
}

.o-us__intro-desc {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 20px;
  color: #EEF1F3;
  opacity: .92
}

.o-us__intro-desc:last-of-type {
  margin-bottom: 0
}

.o-us__intro-deco {
  position: absolute;
  top: 40px;
  right: -120px;
  width: 280px;
  height: 280px;
  background: radial-gradient(ellipse at center, #961223 0%, transparent 70%);
  opacity: .12;
  pointer-events: none;
  z-index: 0
}

.o-us__stats {
  background: #0a0a0a;
  padding: 80px 20px;
  position: relative
}

.o-us__stats-wrap {
  max-width: 1280px;
  margin: 0 auto
}

.o-us__stats-top {
  text-align: center;
  margin: 0 0 80px;
  position: relative
}

.o-us__stats-title {
  font-size: 52px;
  line-height: 1.2;
  margin: 0 0 20px;
  color: #EEF1F3
}

.o-us__stats-subtitle {
  font-size: 16px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .85;
  margin: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto
}

.o-us__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 0 0 80px
}

.o-us__stat-card {
  background: #1a1a1a;
  border-radius: 3px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px 0 #0c99d61c;
  transition: transform .22s ease-out, box-shadow .22s ease-out
}

.o-us__stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 44px 0 #0c99d621 0 0 0 1px #0c99d626
}

.o-us__stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #0C99D6 0%, #961223 100%);
  opacity: .8
}

.o-us__stat-num {
  font-size: 52px;
  line-height: 1.2;
  color: #0C99D6;
  margin: 0 0 10px;
  font-weight: 700
}

.o-us__stat-label {
  font-size: 20px;
  line-height: 1.45;
  color: #EEF1F3;
  margin: 0 0 10px
}

.o-us__stat-detail {
  font-size: 13px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .75;
  margin: 0
}

.o-us__narrative {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto
}

.o-us__narrative-col {
  padding: 80px 40px;
  position: relative
}

.o-us__narrative-col--left {
  background: #0C99D6;
  color: #000
}

.o-us__narrative-col--right {
  background: #1a1a1a;
  color: #EEF1F3
}

.o-us__narrative-col::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border: 1px dotted #fff3;
  pointer-events: none;
  z-index: 1
}

.o-us__narrative-num {
  font-size: 120px;
  line-height: 1;
  opacity: .08;
  position: absolute;
  top: 20px;
  right: 40px;
  margin: 0;
  font-weight: 700;
  z-index: 0
}

.o-us__narrative-col--left .o-us__narrative-num {
  color: #000
}

.o-us__narrative-col--right .o-us__narrative-num {
  color: #EEF1F3
}

.o-us__narrative-head {
  font-size: 20px;
  line-height: 1.45;
  margin: 0 0 20px;
  position: relative;
  z-index: 2
}

.o-us__narrative-col--left .o-us__narrative-head {
  color: #000
}

.o-us__narrative-col--right .o-us__narrative-head {
  color: #EEF1F3
}

.o-us__narrative-txt {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 20px;
  position: relative;
  z-index: 2
}

.o-us__narrative-txt:last-child {
  margin-bottom: 0
}

.o-us__narrative-col--left .o-us__narrative-txt {
  color: #000000e0
}

.o-us__narrative-col--right .o-us__narrative-txt {
  color: #eef1f3e0
}

.o-us__gallery {
  padding: 80px 20px;
  background: #000;
  position: relative
}

.o-us__gallery-wrap {
  max-width: 1280px;
  margin: 0 auto
}

.o-us__gallery-heading {
  font-size: 52px;
  line-height: 1.2;
  margin: 0 0 40px;
  text-align: center;
  color: #EEF1F3
}

.o-us__gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.o-us__gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 3px;
  background: #1a1a1a
}

.o-us__gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px 0 #0c99d640;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .28s ease-out
}

.o-us__gallery-item:hover::after {
  opacity: 1
}

.o-us__gallery-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s ease-out
}

.o-us__gallery-item:hover .o-us__gallery-pic {
  transform: scale(1.05) translateY(-8px)
}

.o-us__chart {
  padding: 80px 20px;
  background: #0a0a0a;
  position: relative
}

.o-us__chart-wrap {
  max-width: 1280px;
  margin: 0 auto
}

.o-us__chart-heading {
  font-size: 52px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: #EEF1F3
}

.o-us__chart-intro {
  font-size: 16px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .85;
  margin: 0 0 80px;
  max-width: 720px
}

.o-us__chart-bars {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.o-us__bar-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px
}

.o-us__bar-label {
  font-size: 16px;
  line-height: 1.45;
  color: #EEF1F3;
  min-width: 240px;
  text-align: right;
  margin: 0
}

.o-us__bar-track {
  flex: 1;
  height: 42px;
  background: #1a1a1a;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 6px 0 #0006
}

.o-us__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #0C99D6 0%, #961223 100%);
  border-radius: 3px;
  transition: width 1.2s ease-out;
  box-shadow: 0 2px 4px 0 #0c99d60d
}

.o-us__bar-fill--w85 {
  width: 85%
}

.o-us__bar-fill--w72 {
  width: 72%
}

.o-us__bar-fill--w91 {
  width: 91%
}

.o-us__bar-fill--w68 {
  width: 68%
}

.o-us__bar-value {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #000;
  font-weight: 700;
  z-index: 1
}

.o-us__icons {
  padding: 80px 20px;
  background: #000;
  position: relative;
  overflow: hidden
}

.o-us__icons-wrap {
  max-width: 1280px;
  margin: 0 auto;
  position: relative
}

.o-us__icons-heading {
  font-size: 52px;
  line-height: 1.2;
  margin: 0 0 80px;
  text-align: center;
  color: #EEF1F3
}

.o-us__icons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px
}

.o-us__icon-card {
  text-align: center;
  padding: 40px 20px;
  background: #1a1a1a;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease-out
}

.o-us__icon-card:hover {
  transform: translateY(-6px)
}

.o-us__icon-shape {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  position: relative
}

.o-us__icon-svg {
  width: 100%;
  height: 100%;
  opacity: .3;
  transition: opacity .45s ease-out
}

.o-us__icon-card:nth-child(1) .o-us__icon-svg {
  animation: o-us-pulse-1 4s ease-in-out infinite
}

.o-us__icon-card:nth-child(2) .o-us__icon-svg {
  animation: o-us-pulse-2 4s ease-in-out 1s infinite
}

.o-us__icon-card:nth-child(3) .o-us__icon-svg {
  animation: o-us-pulse-3 4s ease-in-out 2s infinite
}

.o-us__icon-card:nth-child(4) .o-us__icon-svg {
  animation: o-us-pulse-4 4s ease-in-out 3s infinite
}

@keyframes o-us-pulse-1 {

  0%,
  100% {
    opacity: .3
  }

  25% {
    opacity: 1
  }
}

@keyframes o-us-pulse-2 {

  0%,
  100% {
    opacity: .3
  }

  25% {
    opacity: 1
  }
}

@keyframes o-us-pulse-3 {

  0%,
  100% {
    opacity: .3
  }

  25% {
    opacity: 1
  }
}

@keyframes o-us-pulse-4 {

  0%,
  100% {
    opacity: .3
  }

  25% {
    opacity: 1
  }
}

.o-us__icon-label {
  font-size: 16px;
  line-height: 1.45;
  color: #EEF1F3;
  margin: 0
}

.o-us__team {
  padding: 80px 20px;
  background: #0a0a0a;
  position: relative
}

.o-us__team::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: repeating-linear-gradient(to bottom, #eef1f326 0px, #eef1f326 4px, transparent 4px, transparent 12px);
  pointer-events: none
}

.o-us__team-wrap {
  max-width: 1280px;
  margin: 0 auto
}

.o-us__team-heading {
  font-size: 52px;
  line-height: 1.2;
  margin: 0 0 40px;
  text-align: center;
  color: #EEF1F3
}

.o-us__team-intro {
  font-size: 16px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .85;
  margin: 0 auto 80px;
  max-width: 720px;
  text-align: center
}

.o-us__team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px
}

.o-us__member {
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 18px 0 #0c99d61c;
  transition: box-shadow .25s ease-out
}

.o-us__member:hover {
  box-shadow: 0 8px 44px 0 #0c99d621 4px 4px 0 0 #96122366
}

.o-us__member-pic-wrap {
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative
}

.o-us__member-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .38s ease-out
}

.o-us__member:hover .o-us__member-pic {
  transform: scale(1.06) translateX(12px)
}

.o-us__member-info {
  padding: 40px
}

.o-us__member-name {
  font-size: 20px;
  line-height: 1.45;
  margin: 0 0 10px;
  color: #EEF1F3
}

.o-us__member-role {
  font-size: 13px;
  line-height: 1.65;
  color: #0C99D6;
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: .05em
}

.o-us__member-bio {
  font-size: 16px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .82;
  margin: 0
}

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

  .o-us__intro-visual {
    height: 420px
  }

  .o-us__stats-grid {
    grid-template-columns: 1fr
  }

  .o-us__narrative {
    grid-template-columns: 1fr
  }

  .o-us__gallery-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .o-us__icons-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .o-us__team-grid {
    grid-template-columns: 1fr
  }

  .o-us__bar-label {
    min-width: 180px;
    font-size: 13px
  }
}

@media (max-width: 768px) {
  .o-us__intro {
    padding: 40px 20px
  }

  .o-us__intro-heading {
    font-size: 32px
  }

  .o-us__stats {
    padding: 40px 20px
  }

  .o-us__stats-top {
    margin: 0 0 40px
  }

  .o-us__stats-title {
    font-size: 32px
  }

  .o-us__stats-grid {
    margin: 0 0 40px
  }

  .o-us__stat-card {
    padding: 20px
  }

  .o-us__stat-num {
    font-size: 32px
  }

  .o-us__narrative-col {
    padding: 40px 20px
  }

  .o-us__narrative-num {
    font-size: 80px
  }

  .o-us__gallery {
    padding: 40px 20px
  }

  .o-us__gallery-heading {
    font-size: 32px;
    margin: 0 0 20px
  }

  .o-us__gallery-grid {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .o-us__chart {
    padding: 40px 20px
  }

  .o-us__chart-heading {
    font-size: 32px
  }

  .o-us__chart-intro {
    margin: 0 0 40px
  }

  .o-us__bar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
  }

  .o-us__bar-label {
    min-width: auto;
    text-align: left
  }

  .o-us__bar-track {
    width: 100%
  }

  .o-us__icons {
    padding: 40px 20px
  }

  .o-us__icons-heading {
    font-size: 32px;
    margin: 0 0 40px
  }

  .o-us__icons-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .o-us__team {
    padding: 40px 20px
  }

  .o-us__team-heading {
    font-size: 32px
  }

  .o-us__team-intro {
    margin: 0 auto 40px
  }

  .o-us__member-info {
    padding: 20px
  }
}

.proc {
  background: #000;
  color: #EEF1F3;
  min-height: 100vh
}

.proc__stage-intro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px;
  position: relative;
  overflow: hidden
}

.proc__stage-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center
}

.proc__stage-intro-visual {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 8px 44px 0 #0c99d621
}

.proc__stage-intro-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.proc__stage-intro-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, #000000d9, transparent);
  pointer-events: none
}

.proc__stage-intro-txt {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.proc__stage-intro-label {
  font-size: 13px;
  color: #0C99D6;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .9
}

.proc__stage-intro-heading {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0
}

.proc__stage-intro-desc {
  font-size: 16px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .85;
  margin: 0
}

.proc__cycle-viz {
  background: #0a0a0a;
  padding: 80px 20px;
  position: relative
}

.proc__cycle-viz::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, #0C99D6, transparent)
}

.proc__cycle-container {
  max-width: 1280px;
  margin: 0 auto
}

.proc__cycle-heading-wrap {
  text-align: center;
  margin-bottom: 80px
}

.proc__cycle-bar {
  width: 60px;
  height: 3px;
  background: #961223;
  margin: 0 auto 20px
}

.proc__cycle-heading {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0
}

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

.proc__cycle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px
}

.proc__cycle-icon-wrap {
  width: 120px;
  height: 120px;
  border-radius: 32px;
  background: linear-gradient(135deg, #0c99d626, #96122314);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .22s ease-out, box-shadow .22s ease-out;
  box-shadow: 0 4px 18px 0 #0c99d61c
}

.proc__cycle-item:nth-child(1) .proc__cycle-icon-wrap {
  animation: proc-pulse-1 3.2s ease-in-out infinite
}

.proc__cycle-item:nth-child(2) .proc__cycle-icon-wrap {
  animation: proc-pulse-2 3.2s ease-in-out infinite .8s
}

.proc__cycle-item:nth-child(3) .proc__cycle-icon-wrap {
  animation: proc-pulse-3 3.2s ease-in-out infinite 1.6s
}

.proc__cycle-item:nth-child(4) .proc__cycle-icon-wrap {
  animation: proc-pulse-4 3.2s ease-in-out infinite 2.4s
}

@keyframes proc-pulse-1 {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 18px 0 #0c99d61c
  }

  25% {
    transform: scale(1.08);
    box-shadow: 0 8px 44px 0 #0c99d63d
  }
}

@keyframes proc-pulse-2 {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 18px 0 #0c99d61c
  }

  25% {
    transform: scale(1.08);
    box-shadow: 0 8px 44px 0 #0c99d63d
  }
}

@keyframes proc-pulse-3 {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 18px 0 #0c99d61c
  }

  25% {
    transform: scale(1.08);
    box-shadow: 0 8px 44px 0 #0c99d63d
  }
}

@keyframes proc-pulse-4 {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 18px 0 #0c99d61c
  }

  25% {
    transform: scale(1.08);
    box-shadow: 0 8px 44px 0 #0c99d63d
  }
}

.proc__cycle-icon-svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: #0C99D6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.proc__cycle-num {
  font-size: 52px;
  line-height: 1;
  color: #0C99D6;
  opacity: .25;
  font-weight: 700;
  margin: 0
}

.proc__cycle-label {
  font-size: 20px;
  line-height: 1.45;
  color: #EEF1F3;
  margin: 0;
  font-weight: 600
}

.proc__cycle-detail {
  font-size: 13px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .7;
  margin: 0
}

.proc__split-depth {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px;
  position: relative
}

.proc__split-depth-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: start
}

.proc__split-depth-content {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.proc__split-depth-heading {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0;
  position: relative;
  padding-left: 20px
}

.proc__split-depth-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #961223
}

.proc__split-depth-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0
}

.proc__split-depth-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  background: #0c99d60a;
  padding: 20px;
  border-radius: 3px;
  border-left: 3px solid #0C99D6;
  transition: background .18s ease-out, border-color .18s ease-out
}

.proc__split-depth-item:hover {
  background: #0c99d614;
  border-left-color: #961223
}

.proc__split-depth-num {
  font-size: 20px;
  line-height: 1.2;
  color: #0C99D6;
  font-weight: 700;
  text-align: right;
  min-width: 32px
}

.proc__split-depth-txt {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.proc__split-depth-term {
  font-size: 16px;
  line-height: 1.45;
  color: #EEF1F3;
  font-weight: 600;
  margin: 0
}

.proc__split-depth-def {
  font-size: 13px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .75;
  margin: 0
}

.proc__split-depth-aside {
  position: relative
}

.proc__split-depth-divider {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, #0C99D6 20%, #0C99D6 80%, transparent)
}

.proc__split-depth-aside-inner {
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.proc__split-depth-visual {
  width: 100%;
  height: 320px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 8px 44px 0 #0c99d621;
  position: relative
}

.proc__split-depth-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.proc__split-depth-metric-set {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.proc__split-depth-metric {
  background: #0a0a0a;
  padding: 20px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #0c99d626;
  transition: border-color .2s ease-out, box-shadow .2s ease-out
}

.proc__split-depth-metric:hover {
  border-color: #0c99d666;
  box-shadow: 0 4px 18px 0 #0c99d61c
}

.proc__split-depth-metric-val {
  font-size: 52px;
  line-height: 1;
  color: #0C99D6;
  margin: 0;
  font-weight: 700
}

.proc__split-depth-metric-label {
  font-size: 13px;
  line-height: 1.45;
  color: #EEF1F3;
  opacity: .7;
  margin: 0
}

.proc__texture-stage {
  background: #0a0a0a;
  padding: 80px 20px;
  position: relative;
  overflow: hidden
}

.proc__texture-stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #eef1f303 2px, #eef1f303 4px), repeating-linear-gradient(90deg, transparent, transparent 2px, #eef1f303 2px, #eef1f303 4px);
  opacity: .3;
  pointer-events: none
}

.proc__texture-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.proc__texture-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 80px
}

.proc__texture-col {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.proc__texture-marker {
  width: 48px;
  height: 3px;
  background: linear-gradient(to right, #0C99D6, #961223)
}

.proc__texture-heading {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0
}

.proc__texture-para {
  font-size: 16px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .85;
  margin: 0
}

.proc__texture-visual-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px
}

.proc__texture-img-wrap {
  width: 100%;
  height: 360px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 44px 0 #96122321
}

.proc__texture-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease-out
}

.proc__texture-img-wrap:hover .proc__texture-img {
  transform: scale(1.05)
}

.proc__texture-caption-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, #000000e6, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px
}

.proc__texture-caption-heading {
  font-size: 20px;
  line-height: 1.45;
  color: #EEF1F3;
  margin: 0;
  font-weight: 600
}

.proc__texture-caption-txt {
  font-size: 13px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .8;
  margin: 0
}

.proc__texture-bottom {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.proc__texture-phase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px
}

.proc__texture-phase {
  background: #0c99d60d;
  padding: 40px 20px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: background .25s ease-out;
  border: 2px solid transparent
}

.proc__texture-phase:hover {
  background: linear-gradient(180deg, #0c99d614, #9612230d);
  border-color: #0c99d633
}

.proc__texture-phase-num-bg {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 80px;
  line-height: 1;
  color: #0C99D6;
  opacity: .08;
  font-weight: 700;
  pointer-events: none
}

.proc__texture-phase-heading {
  font-size: 20px;
  line-height: 1.45;
  color: #EEF1F3;
  margin: 0;
  font-weight: 600;
  position: relative;
  z-index: 1
}

.proc__texture-phase-txt {
  font-size: 13px;
  line-height: 1.65;
  color: #EEF1F3;
  opacity: .75;
  margin: 0;
  position: relative;
  z-index: 1
}

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

  .proc__stage-intro-visual {
    height: 320px
  }

  .proc__cycle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px
  }

  .proc__split-depth-layout {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .proc__split-depth-divider {
    display: none
  }

  .proc__split-depth-aside-inner {
    padding-left: 0
  }

  .proc__texture-top {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .proc__texture-visual-pair {
    grid-template-columns: 1fr
  }

  .proc__texture-phase-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 768px) {
  .proc__stage-intro {
    padding: 40px 20px
  }

  .proc__stage-intro-heading {
    font-size: 32px
  }

  .proc__cycle-viz {
    padding: 40px 20px
  }

  .proc__cycle-heading-wrap {
    margin-bottom: 40px
  }

  .proc__cycle-heading {
    font-size: 32px
  }

  .proc__cycle-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .proc__split-depth {
    padding: 40px 20px
  }

  .proc__split-depth-heading {
    font-size: 32px
  }

  .proc__texture-stage {
    padding: 40px 20px
  }

  .proc__texture-heading {
    font-size: 32px
  }

  .proc__texture-bottom {
    margin-top: 40px
  }
}

.dbt {
  background: #000;
  color: #EEF1F3;
  min-height: 100vh
}

.dbt__opening {
  background: #0f0f0f;
  position: relative;
  padding: 80px 20px;
  overflow: hidden
}

.dbt__opening::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 50%, #0c99d614 0%, transparent 70%);
  pointer-events: none
}

.dbt__opening-curve {
  position: absolute;
  stroke: #0c99d626;
  fill: none;
  stroke-width: 2;
  pointer-events: none
}

.dbt__opening-curve--one {
  top: 10%;
  left: -5%;
  width: 40%;
  height: 60%
}

.dbt__opening-curve--two {
  bottom: 15%;
  right: -8%;
  width: 50%;
  height: 70%
}

.dbt__opening-curve--three {
  top: 40%;
  left: 30%;
  width: 35%;
  height: 45%
}

.dbt__opening-wrap {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.dbt__opening-primary {
  padding: 0 20px 40px 80px;
  max-width: 820px
}

.dbt__opening-title {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0 0 40px;
  font-weight: 700
}

.dbt__opening-quote {
  font-size: 20px;
  line-height: 1.65;
  color: #eef1f3d9;
  font-style: italic;
  margin: 0;
  padding: 0 0 0 40px;
  border-left: 3px solid #0C99D6
}

.dbt__belong {
  background: #000;
  padding: 80px 20px;
  position: relative
}

.dbt__belong::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, #0f0f0f00 0%, #0f0f0f99 50%, #0f0f0f00 100%);
  filter: blur(20px);
  pointer-events: none
}

.dbt__belong-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start
}

.dbt__belong-visual {
  position: relative
}

.dbt__belong-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  box-shadow: 0 8px 44px 0 #0c99d621;
  animation: dbt-split-reveal .45s ease-out forwards;
  transform-origin: center
}

@keyframes dbt-split-reveal {
  from {
    clip-path: inset(0 50% 0 50%);
    opacity: 0
  }

  to {
    clip-path: inset(0 0 0 0);
    opacity: 1
  }
}

.dbt__belong-content {
  padding: 20px 0
}

.dbt__belong-heading {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0 0 40px;
  font-weight: 700
}

.dbt__belong-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 20px
}

.dbt__belong-item {
  background: #0f0f0f;
  padding: 20px;
  border-radius: 3px;
  border: 1px solid #0c99d633;
  position: relative;
  transition: border-color .2s ease-out, transform .18s ease-out
}

.dbt__belong-item:hover {
  border-color: #0c99d680;
  transform: translateX(10px)
}

.dbt__belong-item-label {
  font-size: 16px;
  line-height: 1.45;
  color: #EEF1F3;
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px
}

.dbt__belong-item-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #0C99D6 0%, #961223 100%);
  flex-shrink: 0;
  transition: width .22s ease-out
}

.dbt__belong-item:hover .dbt__belong-item-label::before {
  width: 40px
}

.dbt__belong-item-text {
  font-size: 13px;
  line-height: 1.65;
  color: #eef1f3b3;
  margin: 10px 0 0 30px
}

.dbt__approach {
  background: linear-gradient(135deg, #000 0%, #000 50%, #0a0a0f 50%, #0a0a0f 100%);
  padding: 80px 20px;
  position: relative
}

.dbt__approach-wrap {
  max-width: 1280px;
  margin: 0 auto
}

.dbt__approach-heading {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0 0 40px;
  font-weight: 700;
  text-align: center
}

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

.dbt__approach-card {
  background: #0f0f0f;
  padding: 40px 20px;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease-out;
  box-shadow: 0 4px 18px 0 #0c99d61c
}

.dbt__approach-card:hover {
  transform: translateY(-10px)
}

.dbt__approach-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #0C99D6 0%, #961223 100%);
  transition: height .2s ease-out
}

.dbt__approach-card:hover::before {
  height: 8px
}

.dbt__approach-card-num {
  font-size: 52px;
  line-height: 1;
  color: #0c99d61f;
  position: absolute;
  top: 20px;
  right: 20px;
  font-weight: 700;
  pointer-events: none
}

.dbt__approach-card-title {
  font-size: 20px;
  line-height: 1.45;
  color: #EEF1F3;
  margin: 0 0 20px;
  font-weight: 600;
  position: relative;
  z-index: 1
}

.dbt__approach-card-desc {
  font-size: 13px;
  line-height: 1.65;
  color: #eef1f3b3;
  margin: 0;
  position: relative;
  z-index: 1
}

.dbt__approach-visual {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.dbt__approach-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  box-shadow: 0 4px 18px 0 #0c99d61c;
  transition: box-shadow .24s ease-out, transform .2s ease-out
}

.dbt__approach-img:hover {
  box-shadow: 0 8px 44px 0 #0c99d621;
  transform: scale(1.02)
}

.dbt__hesitation {
  background: #000;
  padding: 80px 20px;
  position: relative
}

.dbt__hesitation::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, #0f0f0f00 0%, #0f0f0f99 50%, #0f0f0f00 100%);
  filter: blur(20px);
  pointer-events: none
}

.dbt__hesitation-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 40px;
  align-items: center
}

.dbt__hesitation-content {
  padding: 20px
}

.dbt__hesitation-heading {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0 0 40px;
  font-weight: 700
}

.dbt__hesitation-text {
  font-size: 16px;
  line-height: 1.65;
  color: #eef1f3cc;
  margin: 0 0 20px
}

.dbt__hesitation-text:last-child {
  margin: 0
}

.dbt__hesitation-visual {
  position: relative
}

.dbt__hesitation-img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center;
  border-radius: 32px;
  box-shadow: 0 8px 44px 0 #0c99d621
}

.dbt__hesitation-icon-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%
}

.dbt__hesitation-icon {
  width: 120px;
  height: 120px;
  position: relative
}

.dbt__hesitation-icon-svg {
  width: 100%;
  height: 100%;
  animation: dbt-icon-trace 3s ease-in-out infinite
}

@keyframes dbt-icon-trace {

  0%,
  100% {
    stroke-dashoffset: 0
  }

  50% {
    stroke-dashoffset: 400
  }
}

.dbt__hesitation-icon-svg circle {
  fill: none;
  stroke: #0C99D6;
  stroke-width: 2;
  stroke-dasharray: 400;
  stroke-dashoffset: 0
}

.dbt__hesitation-icon-svg path {
  fill: #0C99D6
}

.dbt__community {
  background: #0f0f0f;
  padding: 80px 20px;
  position: relative
}

.dbt__community-wrap {
  max-width: 1280px;
  margin: 0 auto
}

.dbt__community-heading {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0 0 40px;
  font-weight: 700
}

.dbt__community-timeline {
  position: relative;
  padding: 0 0 0 80px
}

.dbt__community-timeline::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #0C99D6 0%, #0c99d64d 100%)
}

.dbt__community-period {
  margin: 0 0 40px;
  position: relative
}

.dbt__community-period:last-child {
  margin: 0
}

.dbt__community-period-marker {
  position: absolute;
  left: -48px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0C99D6;
  border-radius: 32px;
  box-shadow: 0 0 0 6px #0c99d633;
  transition: transform .2s ease-out, box-shadow .2s ease-out
}

.dbt__community-period:hover .dbt__community-period-marker {
  transform: scale(1.3);
  box-shadow: 0 0 0 10px #0c99d64d
}

.dbt__community-period-label {
  font-size: 20px;
  line-height: 1.45;
  color: #0C99D6;
  margin: 0 0 10px;
  font-weight: 600
}

.dbt__community-period-desc {
  font-size: 16px;
  line-height: 1.65;
  color: #eef1f3cc;
  margin: 0
}

.dbt__community-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 40px 0 0
}

.dbt__community-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  box-shadow: 0 4px 18px 0 #0c99d61c;
  transition: transform .22s ease-out
}

.dbt__community-img:hover {
  transform: translateY(-10px)
}

.dbt__lasting {
  background: #000;
  padding: 80px 20px;
  position: relative
}

.dbt__lasting-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px
}

.dbt__lasting-block {
  background: #0f0f0f;
  padding: 20px;
  border-radius: 3px;
  border: 1px solid #0c99d626;
  position: relative;
  transition: border-color .18s ease-out;
  cursor: pointer
}

.dbt__lasting-block:hover {
  border-color: #0c99d699
}

.dbt__lasting-block-hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease-out, opacity .25s ease-out, padding .3s ease-out;
  padding: 0 20px
}

.dbt__lasting-block:hover .dbt__lasting-block-hidden {
  max-height: 300px;
  opacity: 1;
  padding: 20px 20px 0
}

.dbt__lasting-block-icon {
  width: 40px;
  height: 40px;
  margin: 0 0 20px
}

.dbt__lasting-block-svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #0C99D6;
  stroke-width: 2
}

.dbt__lasting-block-title {
  font-size: 16px;
  line-height: 1.45;
  color: #EEF1F3;
  margin: 0 0 10px;
  font-weight: 600
}

.dbt__lasting-block-short {
  font-size: 13px;
  line-height: 1.65;
  color: #eef1f3b3;
  margin: 0
}

.dbt__lasting-block-detail {
  font-size: 13px;
  line-height: 1.65;
  color: #eef1f3a6;
  margin: 0
}

.dbt__lasting-heading {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0 0 40px;
  font-weight: 700;
  grid-column: 1 / -1
}

@media (max-width: 1024px) {
  .dbt__belong-wrap {
    grid-template-columns: 1fr
  }

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

  .dbt__hesitation-wrap {
    grid-template-columns: 1fr
  }

  .dbt__lasting-wrap {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width: 768px) {
  .dbt__opening-primary {
    padding: 0 20px 40px
  }

  .dbt__opening-title,
  .dbt__belong-heading,
  .dbt__approach-heading,
  .dbt__hesitation-heading,
  .dbt__community-heading,
  .dbt__lasting-heading {
    font-size: 40px
  }

  .dbt__approach-visual {
    grid-template-columns: 1fr
  }

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

  .dbt__lasting-wrap {
    grid-template-columns: 1fr
  }
}

.kontakt {
  background: #000;
  color: #EEF1F3;
  min-height: 100vh
}

.kontakt__tlo-animacja {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden
}

.kontakt__gradient-ruch {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(ellipse at 30% 30%, #0c99d614 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, #9612230f 0%, transparent 50%);
  animation: kontakt-gradient-przesun 25s ease-in-out infinite
}

@keyframes kontakt-gradient-przesun {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg)
  }

  50% {
    transform: translate(-15%, -15%) rotate(5deg)
  }
}

.kontakt__kontener {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px;
  position: relative;
  z-index: 1
}

.kontakt__naglowek-strefa {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 80px;
  margin-bottom: 80px;
  position: relative
}

.kontakt__cytat-tlo {
  position: absolute;
  left: -40px;
  top: -60px;
  font-size: 280px;
  line-height: 1;
  color: #0c99d60a;
  font-weight: 700;
  pointer-events: none;
  user-select: none
}

.kontakt__tekst-lewa {
  flex: 1;
  position: relative;
  z-index: 2
}

.kontakt__tytul-glowny {
  font-size: 52px;
  line-height: 1.2;
  margin: 0 0 20px;
  color: #EEF1F3;
  font-weight: 700
}

.kontakt__opis-rozszerzony {
  font-size: 16px;
  line-height: 1.65;
  color: #eef1f3d9;
  margin: 0
}

.kontakt__obraz-prawa {
  flex: 0 0 480px;
  height: 360px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  box-shadow: 0 8px 44px 0 #0c99d621
}

.kontakt__obraz-prawa::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, #0c99d61f 0%, transparent 70%)
}

.kontakt__diament-akcent {
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0c99d640 0%, #96122326 100%);
  transform: rotate(45deg);
  top: 40px;
  right: 40px;
  border-radius: 3px;
  box-shadow: 0 4px 18px 0 #0c99d61c
}

.kontakt__glowna-sekcja {
  display: flex;
  flex-direction: row;
  gap: 80px;
  align-items: flex-start
}

.kontakt__info-kolumna {
  flex: 0 0 420px;
  background: #0d0d0d;
  border-radius: 3px;
  padding: 40px;
  box-shadow: 0 4px 18px 0 #0c99d61c;
  position: relative;
  overflow: hidden
}

.kontakt__info-kolumna::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #0C99D6 0%, #0c99d600 100%)
}

.kontakt__info-tytul {
  font-size: 20px;
  line-height: 1.45;
  margin: 0 0 40px;
  color: #0C99D6;
  font-weight: 600
}

.kontakt__dane-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.kontakt__dane-element {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-left: 40px
}

.kontakt__ikona-pojemnik {
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center
}

.kontakt__ikona-svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #0C99D6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.kontakt__etykieta-dane {
  font-size: 13px;
  line-height: 1.45;
  color: #eef1f380;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0
}

.kontakt__wartosc-dane {
  font-size: 16px;
  line-height: 1.65;
  color: #EEF1F3;
  margin: 0;
  transition: color .18s ease-out
}

.kontakt__dane-element a {
  color: #EEF1F3;
  text-decoration: none;
  transition: color .22s ease-out;
  display: inline-block
}

.kontakt__dane-element a:hover {
  color: #0C99D6
}

.kontakt__dane-element a:visited {
  opacity: .85
}

.kontakt__forma-kolumna {
  flex: 1;
  background: #0d0d0d;
  border-radius: 32px;
  padding: 40px;
  box-shadow: 0 8px 44px 0 #96122321;
  position: relative
}

.kontakt__forma-tytul {
  font-size: 20px;
  line-height: 1.45;
  margin: 0 0 10px;
  color: #EEF1F3;
  font-weight: 600
}

.kontakt__forma-podtytul {
  font-size: 16px;
  line-height: 1.65;
  color: #eef1f3a6;
  margin: 0 0 40px
}

.kontakt__formularz {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.kontakt__pole-grupa {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.kontakt__etykieta {
  font-size: 13px;
  line-height: 1.45;
  color: #eef1f3bf;
  font-weight: 500
}

.kontakt__pole-wejscie {
  width: 100%;
  padding: 20px;
  background: #000;
  border: 1px solid #0c99d633;
  border-radius: 3px;
  color: #EEF1F3;
  font-size: 16px;
  line-height: 1.45;
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
  outline: none
}

.kontakt__pole-wejscie::placeholder {
  color: #eef1f380;
  font-style: italic;
  opacity: .6
}

.kontakt__pole-wejscie:focus {
  border-color: #0C99D6;
  box-shadow: inset 0 0 0 1px #0c99d64d 0 2px 4px 0 #0c99d60d
}

.kontakt__pole-wejscie:hover:not(:focus) {
  border-color: #0c99d666
}

.kontakt__wybor-czas {
  position: relative;
  width: 100%
}

.kontakt__wybor-pole {
  width: 100%;
  padding: 20px;
  background: #000;
  border: 1px solid #0c99d633;
  border-radius: 3px;
  color: #EEF1F3;
  font-size: 16px;
  line-height: 1.45;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
  outline: 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='%230C99D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 50px
}

.kontakt__wybor-pole:focus {
  border-color: #0C99D6;
  box-shadow: inset 0 0 0 1px #0c99d64d 0 2px 4px 0 #0c99d60d
}

.kontakt__wybor-pole:hover:not(:focus) {
  border-color: #0c99d666
}

.kontakt__zgoda-kontener {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  background: #0c99d608;
  border-radius: 3px;
  border: 1px solid #0c99d61a
}

.kontakt__zgoda-pole {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #0C99D6
}

.kontakt__zgoda-tekst {
  font-size: 13px;
  line-height: 1.65;
  color: #eef1f3bf;
  margin: 0
}

.kontakt__zgoda-tekst a {
  color: #0C99D6;
  text-decoration: none;
  border-bottom: 1px solid #0c99d64d;
  transition: border-color .18s ease-out
}

.kontakt__zgoda-tekst a:hover {
  border-bottom-color: #0C99D6
}

.kontakt__przycisk-wyslij {
  padding: 20px 40px;
  background: linear-gradient(135deg, #0C99D6 0%, #0a7ab0 100%);
  border: none;
  border-radius: 3px;
  color: #EEF1F3;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease-out, box-shadow .25s ease-out, transform .15s ease-out;
  box-shadow: 0 4px 18px 0 #0c99d61c;
  position: relative;
  overflow: hidden
}

.kontakt__przycisk-wyslij::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #eef1f31a, transparent);
  transition: left .4s ease-out
}

.kontakt__przycisk-wyslij:hover {
  background: linear-gradient(135deg, #0a7ab0 0%, #086a96 100%);
  box-shadow: 0 8px 44px 0 #0c99d621;
  transform: translateY(-2px)
}

.kontakt__przycisk-wyslij:hover::before {
  left: 100%
}

.kontakt__przycisk-wyslij:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px 0 #0c99d60d
}

.kontakt__dzielnik-radialny {
  width: 100%;
  height: 1px;
  background: radial-gradient(ellipse at center, #0c99d666 0%, transparent 70%);
  margin: 80px 0
}

.kontakt__stopka-strefa {
  background: linear-gradient(135deg, #0d0d0dcc 0%, #000c 100%);
  border-radius: 32px;
  padding: 40px;
  position: relative;
  overflow: hidden
}

.kontakt__stopka-strefa::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L31 29L60 30L31 31L30 60L29 31L0 30L29 29Z' fill='%230C99D6' fill-opacity='0.02'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  opacity: .5;
  pointer-events: none
}

.kontakt__stopka-siatka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  z-index: 1
}

.kontakt__stopka-blok {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.kontakt__stopka-naglowek {
  font-size: 16px;
  line-height: 1.45;
  color: #0C99D6;
  margin: 0 0 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px
}

.kontakt__stopka-numer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #0c99d61a;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1;
  color: #0C99D6;
  font-weight: 700
}

.kontakt__stopka-tekst {
  font-size: 16px;
  line-height: 1.65;
  color: #eef1f3bf;
  margin: 0
}

.kontakt__wyroznienie-akcent {
  background: #0c99d60d;
  padding: 40px;
  border-radius: 3px;
  border-left: 4px solid #0C99D6;
  margin: 80px 0;
  position: relative
}

.kontakt__wyroznienie-tekst {
  font-size: 16px;
  line-height: 1.65;
  color: #eef1f3d9;
  margin: 0
}

.kontakt__wyroznienie-tekst strong {
  color: #0C99D6;
  font-weight: 600
}

.kontakt__pasek-rozszerzajacy {
  position: relative;
  padding: 40px;
  background: #0d0d0d;
  border-radius: 3px;
  overflow: hidden;
  transition: box-shadow .35s ease-out
}

.kontakt__pasek-rozszerzajacy::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0C99D6, transparent);
  transition: width .35s ease-out
}

.kontakt__pasek-rozszerzajacy:hover::after {
  width: 100%
}

.kontakt__pasek-rozszerzajacy:hover {
  box-shadow: 0 8px 44px 0 #0c99d621
}

@media (max-width: 1024px) {
  .kontakt__naglowek-strefa {
    flex-direction: column;
    gap: 40px
  }

  .kontakt__obraz-prawa {
    flex: 1;
    width: 100%;
    height: 280px
  }

  .kontakt__glowna-sekcja {
    flex-direction: column;
    gap: 40px
  }

  .kontakt__info-kolumna {
    flex: 1;
    width: 100%
  }

  .kontakt__stopka-siatka {
    grid-template-columns: 1fr;
    gap: 40px
  }
}

@media (max-width: 768px) {
  .kontakt__kontener {
    padding: 40px 20px
  }

  .kontakt__tytul-glowny {
    font-size: 32px
  }

  .kontakt__cytat-tlo {
    font-size: 180px;
    left: -20px;
    top: -40px
  }

  .kontakt__forma-kolumna {
    padding: 20px
  }

  .kontakt__info-kolumna {
    padding: 20px
  }

  .kontakt__stopka-strefa {
    padding: 20px
  }
}

.kontakt__obraz-tlo-rozmyte {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0c99d626 0%, #96122314 100%);
  filter: blur(80px);
  opacity: .6;
  z-index: 0
}

.kontakt__forma-kolumna::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #96122326 0%, transparent 70%);
  border-radius: 32px 32px 0 0;
  pointer-events: none
}

.kontakt__dane-element:hover .kontakt__wartosc-dane {
  color: #0C99D6
}

.kontakt__pole-wejscie:invalid:not(:placeholder-shown) {
  border-color: #96122366
}

.kontakt__pole-wejscie:valid:not(:placeholder-shown) {
  border-color: #0c99d666
}

.kontakt__przycisk-wyslij:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none
}

.kontakt__przycisk-wyslij:disabled:hover {
  background: linear-gradient(135deg, #0C99D6 0%, #0a7ab0 100%);
  box-shadow: 0 4px 18px 0 #0c99d61c;
  transform: none
}

.kontakt__stopka-blok:nth-child(2) {
  position: relative
}

.kontakt__stopka-blok:nth-child(2)::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, #0c99d64d, transparent)
}

.kontakt__stopka-blok:nth-child(2)::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, #0c99d64d, transparent)
}

@media (max-width: 1024px) {

  .kontakt__stopka-blok:nth-child(2)::before,
  .kontakt__stopka-blok:nth-child(2)::after {
    display: none
  }
}

.kontakt__technologia-znacznik {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #0c99d614;
  border-radius: 32px;
  font-size: 13px;
  line-height: 1.45;
  color: #0C99D6;
  margin-top: 20px;
  border: 1px solid #0c99d633
}

.kontakt__technologia-znacznik::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #0C99D6;
  border-radius: 50%;
  animation: kontakt-puls 2s ease-in-out infinite
}

@keyframes kontakt-puls {

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

  50% {
    opacity: .5;
    transform: scale(0.8)
  }
}

.kontakt__linia-akcent {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #0C99D6, #0c99d600);
  margin-bottom: 20px
}

.kontakt__forma-tytul::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #0C99D6, #0c99d600);
  margin-bottom: 20px
}

.success-page {
  background: #000;
  color: #EEF1F3;
  padding: 80px 20px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center
}

.success-page .confirm-wrap {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  text-align: center
}

.success-page .status-icon {
  width: 140px;
  height: 140px;
  margin: 0 auto 40px;
  position: relative
}

.success-page .status-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 18px #0c99d61c)
}

.success-page .status-icon circle {
  fill: none;
  stroke: #0C99D6;
  stroke-width: 3;
  stroke-linecap: round
}

.success-page .status-icon polyline {
  fill: none;
  stroke: #0C99D6;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.success-page .confirm-message {
  background: #1a1a1a;
  border-radius: 32px;
  padding: 80px 40px;
  box-shadow: 0 8px 44px 0 #0c99d621;
  max-width: 820px;
  margin: 0 auto
}

.success-page .confirm-message h1 {
  font-size: 52px;
  line-height: 1.2;
  color: #EEF1F3;
  margin: 0 0 20px
}

.success-page .confirm-message p {
  font-size: 20px;
  line-height: 1.65;
  color: #EEF1F3;
  margin: 0 0 40px;
  opacity: .85
}

.success-page .confirm-message p:last-of-type {
  margin-bottom: 0
}

.success-page .detail-box {
  background: #0f0f0f;
  border-radius: 3px;
  padding: 40px;
  margin: 40px 0 0;
  border-left: 4px solid #0C99D6;
  text-align: left
}

.success-page .detail-box h2 {
  font-size: 20px;
  line-height: 1.45;
  color: #0C99D6;
  margin: 0 0 20px
}

.success-page .detail-box p {
  font-size: 16px;
  line-height: 1.65;
  color: #EEF1F3;
  margin: 0 0 10px
}

.success-page .detail-box p:last-child {
  margin-bottom: 0
}

.success-page .action-group {
  margin: 40px 0 0;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap
}

.success-page .action-group a {
  display: inline-block;
  padding: 20px 40px;
  border-radius: 3px;
  font-size: 16px;
  text-decoration: none;
  transition: opacity .18s ease-out, transform .22s ease-out;
  box-shadow: 0 2px 4px 0 #0c99d60d
}

.success-page .action-group a:first-child {
  background: linear-gradient(135deg, #0C99D6 0%, #0a7aad 100%);
  color: #EEF1F3
}

.success-page .action-group a:last-child {
  background: #2a2a2a;
  color: #EEF1F3
}

.success-page .action-group a:hover {
  opacity: .88;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px 0 #0c99d61c
}

.success-page .action-group a:active {
  transform: translateY(0)
}

@media (max-width: 768px) {
  .success-page {
    padding: 40px 20px
  }

  .success-page .status-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 20px
  }

  .success-page .confirm-message {
    padding: 40px 20px
  }

  .success-page .confirm-message h1 {
    font-size: 32px
  }

  .success-page .confirm-message p {
    font-size: 16px
  }

  .success-page .detail-box {
    padding: 20px
  }

  .success-page .action-group {
    flex-direction: column;
    align-items: stretch
  }

  .success-page .action-group a {
    width: 100%;
    text-align: center
  }
}