html {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: 'Karla', sans-serif;
  background: #000;
  color: #e8e8e8
}

.top-bar {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  border-bottom: 1px solid #95D7FD;
  position: relative;
  z-index: 100
}

.top-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px
}

.brand-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #0d0d0d;
  padding: 16px 28px;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  box-shadow: 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f
}

.logo-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block
}

.brand-txt {
  font-size: 22px;
  font-weight: 700;
  color: #95D7FD;
  line-height: 1.1;
  letter-spacing: 0
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.nav-link {
  font-size: 17px;
  line-height: 1.4;
  color: #e8e8e8;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 11px;
  background: #141414;
  border: 1px solid transparent;
  transition: background .28s cubic-bezier(0.4, 0, 0.2, 1), border-color .28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden
}

.nav-link:hover {
  background: #1f1f1f;
  border-color: #95D7FD;
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a
}

.nav-link:focus {
  box-shadow: 0 0 0 4px #95d7fd4d;
  outline: none
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid #95D7FD;
  border-radius: 5px;
  opacity: 0;
  transition: opacity .22s ease-in-out;
  pointer-events: none
}

.nav-link:hover::before {
  opacity: 1
}

.proof-badge {
  background: linear-gradient(180deg, #93400F 0%, #6b2f0b 100%);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.4;
  color: #B9F9D8;
  font-weight: 700;
  border: 1px solid #B9F9D8;
  box-shadow: 0 1px 2px -2px #b9f9d80f 0 4px 22px -2px #b9f9d81a
}

@media (max-width: 1024px) {
  .top-bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px
  }

  .brand-zone {
    justify-content: center
  }

  .nav-primary {
    justify-content: center
  }
}

@media (max-width: 768px) {
  .top-bar-inner {
    padding: 16px
  }

  .brand-zone {
    padding: 8px 16px
  }

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

  .nav-link {
    text-align: center;
    padding: 16px
  }

  .proof-badge {
    text-align: center
  }
}

@media (max-width: 360px) {
  .brand-txt {
    font-size: 17px
  }

  .nav-link {
    font-size: 14px;
    padding: 8px 16px
  }

  .logo-img {
    width: 46px;
    height: 46px
  }
}

.base-footer {
  background: linear-gradient(180deg, #0f0f0f 0%, #050505 100%);
  border-top: 1px solid #2a2a2a;
  margin-top: 56px;
  position: relative
}

.base-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #95D7FD 50%, transparent 100%);
  opacity: .4
}

.ftr-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 28px
}

.ftr-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px
}

.ftr-about {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.ftr-about-txt {
  font-size: 17px;
  line-height: 1.7;
  color: #b8b8b8;
  margin: 0
}

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

.ftr-nav-heading {
  font-size: 17px;
  font-weight: 700;
  color: #95D7FD;
  line-height: 1.4;
  margin: 0 0 8px
}

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

.ftr-nav-item {
  margin: 0
}

.ftr-nav-anchor {
  font-size: 14px;
  line-height: 1.7;
  color: #d0d0d0;
  text-decoration: none;
  transition: color .24s ease-in-out, padding-left .24s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  padding-left: 0
}

.ftr-nav-anchor:hover {
  color: #95D7FD;
  padding-left: 8px
}

.ftr-nav-anchor:focus {
  box-shadow: 0 0 0 4px #95d7fd4d;
  outline: none;
  border-radius: 1px
}

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

.ftr-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: #d0d0d0
}

.ftr-contact-icon {
  width: 20px;
  height: 20px;
  fill: #B9F9D8;
  flex-shrink: 0;
  margin-top: 4px
}

.ftr-contact-link {
  color: #d0d0d0;
  text-decoration: none;
  transition: color .26s ease-in-out
}

.ftr-contact-link:hover {
  color: #95D7FD
}

.ftr-contact-link:focus {
  box-shadow: 0 0 0 4px #95d7fd4d;
  outline: none;
  border-radius: 1px
}

.ftr-logo-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid #2a2a2a
}

.ftr-logo-wrapper {
  background: #0d0d0d;
  padding: 16px;
  border: 1px solid #2a2a2a;
  border-radius: 11px;
  box-shadow: 0 4px 22px -2px #95d7fd1a
}

.ftr-logo-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block
}

.ftr-bottom {
  padding: 28px 0 0;
  border-top: 1px solid #2a2a2a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px
}

.ftr-copyright {
  font-size: 14px;
  line-height: 1.4;
  color: #888
}

.ftr-legal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 28px
}

.ftr-legal-anchor {
  font-size: 14px;
  line-height: 1.4;
  color: #888;
  text-decoration: none;
  transition: color .22s ease-in-out
}

.ftr-legal-anchor:hover {
  color: #95D7FD
}

.ftr-legal-anchor:focus {
  box-shadow: 0 0 0 4px #95d7fd4d;
  outline: none;
  border-radius: 1px
}

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

  .ftr-about {
    grid-column: 1 / -1
  }
}

@media (max-width: 768px) {
  .ftr-container {
    padding: 28px 16px
  }

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

  .ftr-logo-section {
    justify-content: center
  }

  .ftr-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center
  }

  .ftr-legal-list {
    flex-direction: column;
    gap: 8px;
    align-items: center
  }
}

@media (max-width: 360px) {
  .ftr-container {
    padding: 16px 8px
  }

  .ftr-grid {
    gap: 16px;
    margin-bottom: 28px
  }
}

.consent-popup {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
  border: 1px solid #95D7FD;
  border-radius: 11px;
  padding: 28px;
  max-width: 420px;
  box-shadow: 0 9px 52px -2px #95d7fd1f 0 4px 22px -2px #95d7fd1a;
  z-index: 1200;
  transform: translateX(500px);
  transition: transform .38s cubic-bezier(0.4, 0, 0.2, 1)
}

.consent-popup.visible {
  transform: translateX(0)
}

.consent-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #d0d0d0;
  margin: 0 0 16px
}

.consent-uses {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.consent-uses li {
  font-size: 14px;
  line-height: 1.4;
  color: #b8b8b8;
  padding-left: 20px;
  position: relative
}

.consent-uses li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  background: #B9F9D8;
  border-radius: 1px
}

.consent-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between
}

.consent-btn {
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #95D7FD;
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
  transition: color .22s ease-in-out
}

.consent-btn:hover {
  color: #B9F9D8
}

.consent-btn:focus {
  box-shadow: 0 0 0 4px #95d7fd4d;
  outline: none;
  border-radius: 1px
}

.consent-expand {
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #d0d0d0;
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
  transition: color .22s ease-in-out
}

.consent-expand:hover {
  color: #95D7FD
}

.consent-expand:focus {
  box-shadow: 0 0 0 4px #95d7fd4d;
  outline: none;
  border-radius: 1px
}

.consent-detail {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #2a2a2a
}

.consent-detail.shown {
  display: block
}

.consent-category {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px
}

.consent-category:last-child {
  margin-bottom: 0
}

.consent-checkbox {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #95D7FD
}

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

.consent-label {
  font-size: 14px;
  line-height: 1.7;
  color: #d0d0d0;
  cursor: pointer;
  flex: 1
}

.consent-label-disabled {
  cursor: not-allowed
}

@media (max-width: 768px) {
  .consent-popup {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
    padding: 16px
  }

  .consent-actions {
    flex-direction: column;
    gap: 8px
  }

  .consent-btn,
  .consent-expand {
    width: 100%;
    text-align: center
  }
}

@media (max-width: 360px) {
  .consent-popup {
    bottom: 8px;
    right: 8px;
    left: 8px;
    padding: 16px
  }
}

::placeholder {
  color: #95d7fd66
}

:focus {
  box-shadow: 0 0 0 4px #95d7fd4d;
  outline: none
}

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 4px #95d7fd4d;
  outline: none
}

.terms-rq-info {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 28px;
  background: #0a0a0a;
  color: #e8e8e8
}

.terms-rq-info h1 {
  font-size: 70px;
  line-height: 1.1;
  margin-bottom: 56px;
  color: #95D7FD
}

.terms-rq-info h2 {
  font-size: 22px;
  line-height: 1.4;
  margin-top: 56px;
  margin-bottom: 28px;
  color: #B9F9D8
}

.terms-rq-info h3 {
  font-size: 17px;
  line-height: 1.4;
  margin-top: 28px;
  margin-bottom: 16px;
  color: #95D7FD
}

.terms-rq-info h4,
.terms-rq-info h5,
.terms-rq-info h6 {
  font-size: 17px;
  line-height: 1.4;
  margin-top: 28px;
  margin-bottom: 16px;
  color: #e8e8e8
}

.terms-rq-info p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 16px
}

.terms-rq-info strong,
.terms-rq-info b {
  color: #B9F9D8;
  font-weight: 600
}

.terms-rq-info ul,
.terms-rq-info ol {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 28px;
  padding-left: 28px
}

.terms-rq-info li {
  margin-bottom: 8px
}

.terms-rq-info table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  background: #1a1a1a;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f
}

.terms-rq-info thead {
  background: #2a2a2a
}

.terms-rq-info th {
  font-size: 14px;
  line-height: 1.4;
  padding: 16px;
  text-align: left;
  color: #95D7FD;
  font-weight: 600;
  border-bottom: 1px solid #3a3a3a
}

.terms-rq-info td {
  font-size: 14px;
  line-height: 1.7;
  padding: 16px;
  border-bottom: 1px solid #2a2a2a
}

.terms-rq-info tbody tr:last-child td {
  border-bottom: none
}

.terms-rq-info tbody tr {
  transition: background-color .18s ease-in-out
}

.terms-rq-info tbody tr:hover {
  background: #252525
}

.terms-rq-info hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #95D7FD, transparent);
  margin: 56px 0;
  opacity: .3
}

.terms-rq-info div {
  margin-bottom: 16px
}

.terms-rq-info a {
  color: #95D7FD;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.terms-rq-info a:hover {
  border-bottom-color: #95D7FD
}

@media (max-width: 1024px) {
  .terms-rq-info {
    padding: 28px 16px
  }

  .terms-rq-info h1 {
    font-size: 22px;
    margin-bottom: 28px
  }

  .terms-rq-info h2 {
    font-size: 17px;
    margin-top: 28px;
    margin-bottom: 16px
  }

  .terms-rq-info table {
    font-size: 14px
  }

  .terms-rq-info th,
  .terms-rq-info td {
    padding: 8px
  }
}

@media (max-width: 768px) {
  .terms-rq-info {
    padding: 16px
  }

  .terms-rq-info h1 {
    margin-bottom: 16px
  }

  .terms-rq-info h2 {
    margin-top: 16px
  }

  .terms-rq-info hr {
    margin: 28px 0
  }

  .terms-rq-info table {
    display: block;
    overflow-x: auto
  }
}

.wbnr-hub {
  background: #000;
  color: #e8e8e8;
  min-height: 100vh
}

.wbnr-hub .opener-zone {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden
}

.wbnr-hub .opener-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(0deg, #95d7fd08 1px, transparent 1px), linear-gradient(90deg, #95d7fd08 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0
}

.wbnr-hub .txt-area {
  position: relative;
  z-index: 1
}

.wbnr-hub .main-hdg {
  font-size: 70px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 28px
}

.wbnr-hub .main-hdg .accent-word {
  color: #95D7FD;
  display: block
}

.wbnr-hub .lead-txt {
  font-size: 17px;
  line-height: 1.7;
  color: #b8b8b8;
  margin: 0
}

.wbnr-hub .visual-crop {
  position: relative;
  z-index: 1;
  clip-path: polygon(15% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%, 0% 15%);
  overflow: hidden
}

.wbnr-hub .visual-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85)
}

.wbnr-hub .visual-crop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, #0009 100%);
  pointer-events: none
}

.wbnr-hub .metric-grid {
  background: linear-gradient(147deg, #0a0a0a 0%, #1a1a1a 100%);
  padding: 56px 28px;
  position: relative;
  overflow: hidden
}

.wbnr-hub .metric-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: radial-gradient(ellipse at center, #95d7fd66 0%, transparent 70%);
  pointer-events: none
}

.wbnr-hub .metric-contain {
  max-width: 1280px;
  margin: 0 auto
}

.wbnr-hub .metric-hdg {
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  margin: 0 0 56px;
  background: linear-gradient(90deg, transparent 0%, #95D7FD 50%, transparent 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

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

.wbnr-hub .stat-card {
  background: #0d0d0d;
  border: 1px solid #95d7fd26;
  border-radius: 11px;
  padding: 28px;
  text-align: center;
  position: relative;
  transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1), transform .18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f
}

.wbnr-hub .stat-card:hover {
  border-color: #95d7fd73;
  transform: translateY(-4px)
}

.wbnr-hub .stat-num {
  font-size: 70px;
  line-height: 1.1;
  color: #95D7FD;
  margin: 0 0 8px;
  font-weight: 700
}

.wbnr-hub .stat-lbl {
  font-size: 14px;
  line-height: 1.4;
  color: #a0a0a0;
  margin: 0
}

.wbnr-hub .showcase-block {
  background: linear-gradient(217deg, #0f0f0f 0%, #050505 100%);
  padding: 56px 28px;
  position: relative
}

.wbnr-hub .showcase-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 280px;
  background: conic-gradient(from 0deg at 50% 50%, #95d7fd14 0deg, transparent 90deg, transparent 360deg);
  border-radius: 34px;
  animation: rotate-shape 28s linear infinite;
  pointer-events: none
}

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

  to {
    transform: rotate(360deg)
  }
}

.wbnr-hub .showcase-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px
}

.wbnr-hub .feat-card {
  background: #121212;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #95d7fd1a;
  transition: box-shadow .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.wbnr-hub .feat-card:hover {
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f
}

.wbnr-hub .feat-card.primary {
  grid-row: span 2
}

.wbnr-hub .card-img-wrap {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative
}

.wbnr-hub .feat-card.primary .card-img-wrap {
  height: 100%
}

.wbnr-hub .card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.wbnr-hub .feat-card:hover .card-img-wrap img {
  transform: scale(1.06)
}

.wbnr-hub .card-txt {
  padding: 28px;
  flex-grow: 1;
  display: flex;
  flex-direction: column
}

.wbnr-hub .card-ttl {
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 16px
}

.wbnr-hub .card-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #9a9a9a;
  margin: 0 0 16px;
  flex-grow: 1
}

.wbnr-hub .card-meta {
  display: flex;
  gap: 16px;
  align-items: center
}

.wbnr-hub .meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #95D7FD
}

.wbnr-hub .meta-icon {
  width: 16px;
  height: 16px;
  border-radius: 1px;
  background: #95d7fd33;
  display: flex;
  align-items: center;
  justify-content: center
}

.wbnr-hub .meta-icon svg {
  width: 10px;
  height: 10px;
  fill: #95D7FD
}

.wbnr-hub .detail-section {
  background: linear-gradient(127deg, #95d7fd08 0%, transparent 50%), linear-gradient(307deg, #b9f9d805 0%, transparent 50%), #000;
  padding: 56px 28px;
  position: relative
}

.wbnr-hub .detail-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: radial-gradient(ellipse at center, #95d7fd4d 0%, transparent 70%);
  pointer-events: none
}

.wbnr-hub .detail-contain {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px
}

.wbnr-hub .quote-panel {
  background: linear-gradient(187deg, #0d0d0d 0%, #080808 100%);
  border-radius: 20px;
  padding: 28px;
  border-left: 4px solid #95D7FD;
  position: relative;
  box-shadow: inset 0 2px 4px #0000004d
}

.wbnr-hub .quote-txt {
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 16px;
  font-style: italic
}

.wbnr-hub .quote-author {
  font-size: 14px;
  line-height: 1.4;
  color: #95D7FD;
  margin: 0
}

.wbnr-hub .content-panel {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.wbnr-hub .section-hdg {
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  background: linear-gradient(90deg, #95d7fd26 0%, transparent 100%);
  padding: 8px 16px;
  border-radius: 5px;
  display: inline-block
}

.wbnr-hub .txt-block {
  font-size: 17px;
  line-height: 1.7;
  color: #b0b0b0;
  margin: 0
}

.wbnr-hub .benefit-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none
}

.wbnr-hub .benefit-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: #95d7fd08;
  border-radius: 11px;
  border: 1px solid #95d7fd14;
  transition: background .2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden
}

.wbnr-hub .benefit-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(45deg, #95d7fd0d 0px, #95d7fd0d 8px, transparent 8px, transparent 16px);
  transition: width .32s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none
}

.wbnr-hub .benefit-item:hover::before {
  width: 100%
}

.wbnr-hub .benefit-icon {
  width: 28px;
  height: 28px;
  background: #95D7FD;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.wbnr-hub .benefit-icon svg {
  width: 16px;
  height: 16px;
  fill: #000
}

.wbnr-hub .benefit-txt {
  font-size: 14px;
  line-height: 1.7;
  color: silver;
  margin: 0;
  position: relative;
  z-index: 1
}

.wbnr-hub .action-zone {
  background: #0a0a0a;
  padding: 56px 28px
}

.wbnr-hub .action-contain {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center
}

.wbnr-hub .action-hdg {
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 28px
}

.wbnr-hub .cta-btn {
  display: inline-block;
  padding: 16px 56px;
  background: linear-gradient(147deg, #95D7FD 0%, #7ac0e8 100%);
  color: #000;
  font-size: 17px;
  line-height: 1.4;
  border: 2px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f;
  position: relative
}

.wbnr-hub .cta-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #95D7FD;
  border-radius: 11px;
  opacity: 0;
  transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none
}

.wbnr-hub .cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 22px -2px #95d7fd40 0 9px 52px -2px #95d7fd33
}

.wbnr-hub .cta-btn:hover::after {
  opacity: 1
}

.wbnr-hub .cta-btn:active {
  transform: translateY(0)
}

@media (max-width: 1024px) {
  .wbnr-hub .opener-zone {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 16px
  }

  .wbnr-hub .main-hdg {
    font-size: 50px
  }

  .wbnr-hub .stat-row {
    grid-template-columns: repeat(2, 1fr)
  }

  .wbnr-hub .showcase-wrap {
    grid-template-columns: 1fr
  }

  .wbnr-hub .feat-card.primary {
    grid-row: auto
  }

  .wbnr-hub .detail-contain {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

@media (max-width: 768px) {
  .wbnr-hub .main-hdg {
    font-size: 40px
  }

  .wbnr-hub .stat-row {
    grid-template-columns: 1fr
  }

  .wbnr-hub .stat-num {
    font-size: 50px
  }

  .wbnr-hub .metric-grid,
  .wbnr-hub .showcase-block,
  .wbnr-hub .detail-section,
  .wbnr-hub .action-zone {
    padding: 28px 16px
  }
}

@media (max-width: 360px) {
  .wbnr-hub .main-hdg {
    font-size: 32px
  }

  .wbnr-hub .opener-zone,
  .wbnr-hub .metric-grid,
  .wbnr-hub .showcase-block,
  .wbnr-hub .detail-section,
  .wbnr-hub .action-zone {
    padding: 16px 8px
  }

  .wbnr-hub .cta-btn {
    padding: 16px 28px
  }
}

.wbnr-hub .stripe-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(127deg, transparent 0px, transparent 112px, #95d7fd05 112px, #95d7fd05 116px);
  animation: stripe-drift 84s linear infinite;
  pointer-events: none;
  z-index: 0
}

@keyframes stripe-drift {
  from {
    transform: translateX(0) translateY(0)
  }

  to {
    transform: translateX(112px) translateY(112px)
  }
}

.wbnr-hub .showcase-block {
  position: relative
}

.wbnr-hub .showcase-block .stripe-bg {
  opacity: .4
}

.lrn-prgm {
  background: #000;
  color: #e8e8e8;
  overflow-x: clip;
  position: relative
}

.lrn-prgm::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #95d7fd05 2px, #95d7fd05 4px), repeating-linear-gradient(90deg, transparent, transparent 2px, #b9f9d805 2px, #b9f9d805 4px);
  pointer-events: none;
  z-index: 0
}

.lrn-prgm>* {
  position: relative;
  z-index: 1
}

.lrn-prgm .bnr-intro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 16px;
  background: linear-gradient(167deg, #95d7fd14 0%, transparent 100%);
  border-bottom: 1px solid #95d7fd2e;
  position: relative;
  overflow: hidden
}

.lrn-prgm .bnr-intro::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 28px;
  width: 120px;
  height: 1px;
  background: #95D7FD
}

.lrn-prgm .bnr-intro h1 {
  font-size: 70px;
  line-height: 1.1;
  margin: 0 0 28px;
  color: #95D7FD;
  opacity: 0;
  animation: bnr-fade-in .35s cubic-bezier(0.4, 0, 0.2, 1) .15s forwards
}

@keyframes bnr-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

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

.lrn-prgm .bnr-intro ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.lrn-prgm .bnr-intro li {
  font-size: 17px;
  line-height: 1.4;
  padding-left: 28px;
  position: relative;
  opacity: 0
}

.lrn-prgm .bnr-intro li:nth-child(1) {
  animation: bnr-fade-in .35s cubic-bezier(0.4, 0, 0.2, 1) .3s forwards
}

.lrn-prgm .bnr-intro li:nth-child(2) {
  animation: bnr-fade-in .35s cubic-bezier(0.4, 0, 0.2, 1) .45s forwards
}

.lrn-prgm .bnr-intro li:nth-child(3) {
  animation: bnr-fade-in .35s cubic-bezier(0.4, 0, 0.2, 1) .6s forwards
}

.lrn-prgm .bnr-intro li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  background: #B9F9D8;
  border-radius: 1px;
  transform: rotate(45deg)
}

@media (min-width: 768px) {
  .lrn-prgm .bnr-intro {
    padding: 56px 28px
  }

  .lrn-prgm .bnr-intro ul {
    flex-direction: row;
    gap: 56px
  }
}

.lrn-prgm .dtl-ovrvw {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px
}

@media (min-width: 768px) {
  .lrn-prgm .dtl-ovrvw {
    padding: 56px 28px;
    grid-template-columns: 1fr 1fr
  }
}

@media (min-width: 1024px) {
  .lrn-prgm .dtl-ovrvw {
    grid-template-columns: 380px 1fr;
    gap: 56px
  }
}

.lrn-prgm .img-showcase {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0f0f0f;
  opacity: 0;
  animation: showcase-reveal .4s cubic-bezier(0.4, 0, 0.2, 1) .2s forwards
}

@keyframes showcase-reveal {
  from {
    opacity: 0;
    transform: scale(0.96)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

.lrn-prgm .img-showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4/3
}

.lrn-prgm .img-showcase::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(92deg, #95D7FD 0%, transparent 100%)
}

.lrn-prgm .txt-dsc {
  display: flex;
  flex-direction: column;
  gap: 28px;
  opacity: 0;
  animation: txt-reveal .4s cubic-bezier(0.4, 0, 0.2, 1) .35s forwards
}

@keyframes txt-reveal {
  from {
    opacity: 0;
    transform: translateX(28px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.lrn-prgm .txt-dsc h2 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
  padding: 8px 16px;
  background: #b9f9d81f;
  border-radius: 5px;
  display: inline-block;
  width: fit-content
}

.lrn-prgm .txt-dsc p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  color: #d4d4d4
}

.lrn-prgm .mtrc-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 16px;
  background: #15151599
}

@media (min-width: 768px) {
  .lrn-prgm .mtrc-grid {
    padding: 56px 28px
  }
}

.lrn-prgm .mtrc-grid h2 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 56px;
  padding: 8px 16px;
  background: #93400f2e;
  border-radius: 5px;
  display: inline-block;
  color: #95D7FD;
  opacity: 0;
  animation: hdr-slide .35s cubic-bezier(0.4, 0, 0.2, 1) .1s forwards
}

@keyframes hdr-slide {
  from {
    opacity: 0;
    transform: translateY(-8px)
  }

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

.lrn-prgm .mtrc-lst {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.lrn-prgm .mtrc-itm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0
}

.lrn-prgm .mtrc-itm:nth-child(1) {
  animation: mtrc-appear .3s cubic-bezier(0.4, 0, 0.2, 1) .25s forwards
}

.lrn-prgm .mtrc-itm:nth-child(2) {
  animation: mtrc-appear .3s cubic-bezier(0.4, 0, 0.2, 1) .4s forwards
}

.lrn-prgm .mtrc-itm:nth-child(3) {
  animation: mtrc-appear .3s cubic-bezier(0.4, 0, 0.2, 1) .55s forwards
}

.lrn-prgm .mtrc-itm:nth-child(4) {
  animation: mtrc-appear .3s cubic-bezier(0.4, 0, 0.2, 1) .7s forwards
}

@keyframes mtrc-appear {
  from {
    opacity: 0;
    transform: translateX(-16px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.lrn-prgm .mtrc-lbl {
  font-size: 14px;
  line-height: 1.4;
  color: #a8a8a8;
  margin: 0
}

.lrn-prgm .mtrc-bar-wrap {
  display: flex;
  align-items: center;
  gap: 16px
}

.lrn-prgm .mtrc-bar-track {
  flex: 1;
  height: 8px;
  background: #1a1a1a;
  border-radius: 11px;
  overflow: hidden;
  position: relative
}

.lrn-prgm .mtrc-bar-fill {
  height: 100%;
  background: #95D7FD;
  border-radius: 11px;
  transition: width .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.lrn-prgm .mtrc-itm:nth-child(1) .mtrc-bar-fill {
  width: 84%;
  background: #95D7FD
}

.lrn-prgm .mtrc-itm:nth-child(2) .mtrc-bar-fill {
  width: 67%;
  background: #B9F9D8
}

.lrn-prgm .mtrc-itm:nth-child(3) .mtrc-bar-fill {
  width: 91%;
  background: #93400F
}

.lrn-prgm .mtrc-itm:nth-child(4) .mtrc-bar-fill {
  width: 76%;
  background: linear-gradient(92deg, #95D7FD 0%, #B9F9D8 100%)
}

.lrn-prgm .mtrc-val {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
  min-width: 56px;
  text-align: right
}

.lrn-prgm .crs-dtl {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px
}

@media (min-width: 768px) {
  .lrn-prgm .crs-dtl {
    padding: 56px 28px
  }
}

@media (min-width: 1024px) {
  .lrn-prgm .crs-dtl {
    grid-template-columns: 1fr 420px;
    gap: 56px
  }
}

.lrn-prgm .cntnt-blk {
  display: flex;
  flex-direction: column;
  gap: 28px;
  opacity: 0;
  animation: cntnt-fade .4s cubic-bezier(0.4, 0, 0.2, 1) .15s forwards
}

@keyframes cntnt-fade {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

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

.lrn-prgm .cntnt-blk h3 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
  padding: 8px 16px;
  background: #95d7fd1f;
  border-radius: 5px;
  display: inline-block;
  width: fit-content
}

.lrn-prgm .cntnt-blk p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  color: #d4d4d4
}

.lrn-prgm .sdbr-crd {
  background: #0f0f0f;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f;
  opacity: 0;
  animation: sdbr-slide .4s cubic-bezier(0.4, 0, 0.2, 1) .3s forwards
}

@keyframes sdbr-slide {
  from {
    opacity: 0;
    transform: translateX(28px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.lrn-prgm .sdbr-crd h4 {
  font-size: 17px;
  line-height: 1.4;
  margin: 0;
  color: #B9F9D8
}

.lrn-prgm .sdbr-img {
  border-radius: 11px;
  overflow: hidden;
  position: relative
}

.lrn-prgm .sdbr-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4/3
}

.lrn-prgm .sdbr-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(92deg, #B9F9D8 0%, transparent 100%)
}

.lrn-prgm .sdbr-txt {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  color: #b8b8b8
}

.lrn-prgm .inf-lst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.lrn-prgm .inf-lst li {
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 16px;
  background: #b9f9d80f;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.lrn-prgm .inf-lst .inf-key {
  color: #a8a8a8
}

.lrn-prgm .inf-lst .inf-val {
  color: #fff;
  font-weight: 600
}

.lrn-prgm .cta-btn {
  display: inline-block;
  padding: 16px 28px;
  background: #95D7FD;
  color: #000;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden
}

.lrn-prgm .cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #0000;
  border-radius: 11px;
  transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none
}

.lrn-prgm .cta-btn:hover {
  background: #7dc8f5;
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f
}

.lrn-prgm .cta-btn:hover::before {
  border-color: #00000026
}

.lrn-prgm .cta-btn:active {
  background: #69b8e8;
  transform: translateY(1px)
}

.lrn-prgm .curve-connect {
  position: absolute;
  top: 50%;
  right: -56px;
  width: 112px;
  height: 2px;
  pointer-events: none
}

.lrn-prgm .curve-connect svg {
  width: 100%;
  height: 100%
}

.lrn-prgm .dvdr-cross {
  max-width: 1280px;
  margin: 56px auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px
}

@media (min-width: 768px) {
  .lrn-prgm .dvdr-cross {
    padding: 0 28px
  }
}

.lrn-prgm .dvdr-line {
  width: 56px;
  height: 1px;
  background: #95d7fd4d
}

.lrn-prgm .dvdr-icon {
  width: 16px;
  height: 16px;
  position: relative
}

.lrn-prgm .dvdr-icon::before,
.lrn-prgm .dvdr-icon::after {
  content: '';
  position: absolute;
  background: #95D7FD
}

.lrn-prgm .dvdr-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%)
}

.lrn-prgm .dvdr-icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%)
}

.lrn-prgm .hvr-txt-color {
  display: inline-block;
  position: relative
}

.lrn-prgm .hvr-txt-color span {
  display: inline-block;
  transition: color .18s cubic-bezier(0.4, 0, 0.2, 1);
  color: inherit
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(1) {
  color: #95D7FD;
  transition-delay: 0s
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(2) {
  color: #95D7FD;
  transition-delay: .03s
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(3) {
  color: #95D7FD;
  transition-delay: .06s
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(4) {
  color: #95D7FD;
  transition-delay: .09s
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(5) {
  color: #95D7FD;
  transition-delay: .12s
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(6) {
  color: #95D7FD;
  transition-delay: .15s
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(7) {
  color: #95D7FD;
  transition-delay: .18s
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(8) {
  color: #95D7FD;
  transition-delay: .21s
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(9) {
  color: #95D7FD;
  transition-delay: .24s
}

.lrn-prgm .hvr-txt-color:hover span:nth-child(10) {
  color: #95D7FD;
  transition-delay: .27s
}

@media (min-width: 360px) {
  .lrn-prgm .bnr-intro h1 {
    font-size: 70px
  }
}

@media (min-width: 1024px) {
  .lrn-prgm .mtrc-lst {
    max-width: 720px
  }
}

@media (min-width: 1440px) {

  .lrn-prgm .bnr-intro,
  .lrn-prgm .dtl-ovrvw,
  .lrn-prgm .mtrc-grid,
  .lrn-prgm .crs-dtl {
    padding-left: 56px;
    padding-right: 56px
  }
}

.abt-pg {
  background: #000;
  color: #e8e8e8;
  overflow-x: clip
}

.abt-pg * {
  box-sizing: border-box
}

.abt-pg .hero-abt {
  background: linear-gradient(117deg, #93400F 0%, #000 100%);
  padding: 56px 16px;
  position: relative;
  overflow: hidden
}

.abt-pg .hero-abt::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, #95d7fd26 0%, transparent 70%);
  top: -120px;
  right: -80px;
  animation: drift-light 8s ease-in-out infinite;
  pointer-events: none
}

@keyframes drift-light {

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

  50% {
    transform: translate(-60px, 80px)
  }
}

.abt-pg .hero-abt::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 180px;
  background: linear-gradient(180deg, transparent 0%, #95D7FD 50%, transparent 100%);
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  opacity: .4
}

.abt-pg .hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.abt-pg .hero-txt h1 {
  font-size: 70px;
  line-height: 1.1;
  margin: 0 0 28px;
  color: #fff
}

.abt-pg .hero-txt .tagline {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 28px;
  color: #B9F9D8;
  max-width: 680px
}

.abt-pg .hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.abt-pg .hero-btn {
  display: inline-block;
  padding: 16px 28px;
  background: #95D7FD;
  color: #000;
  text-decoration: none;
  border-radius: 5px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  transition: transform .18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f;
  position: relative
}

.abt-pg .hero-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #000;
  border-radius: 5px;
  opacity: 0;
  transition: opacity .2s ease-in-out;
  pointer-events: none
}

.abt-pg .hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 22px -2px #95d7fd2e 0 9px 52px -2px #95d7fd38
}

.abt-pg .hero-btn:hover::before {
  opacity: 1
}

.abt-pg .hero-btn.secondary {
  background: transparent;
  color: #95D7FD;
  border: 2px solid #95D7FD
}

.abt-pg .hero-btn.secondary::before {
  border-color: #95D7FD
}

.abt-pg .story-blk {
  background: #0a0a0a;
  padding: 56px 16px;
  position: relative
}

.abt-pg .story-blk::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, #93400F 50%, transparent 100%)
}

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

.abt-pg .story-txt h2 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 28px;
  color: #fff;
  display: inline-block;
  background: #93400F;
  padding: 8px 16px;
  border-radius: 1px
}

.abt-pg .story-txt p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 16px;
  color: #d4d4d4
}

.abt-pg .story-txt p:last-child {
  margin-bottom: 0
}

.abt-pg .story-img-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px
}

.abt-pg .story-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  aspect-ratio: 4/3
}

.abt-pg .story-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-pg .story-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #95d7fd80;
  opacity: 0;
  transition: opacity .28s ease-in-out;
  pointer-events: none;
  z-index: 1
}

.abt-pg .story-img-wrap:hover::before {
  opacity: 1
}

.abt-pg .story-img-wrap:hover img {
  transform: scale(1.08)
}

.abt-pg .team-blk {
  background: #000;
  padding: 56px 16px;
  position: relative
}

.abt-pg .team-container {
  max-width: 1280px;
  margin: 0 auto
}

.abt-pg .team-hdr {
  margin-bottom: 56px
}

.abt-pg .team-hdr h2 {
  font-size: 70px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #fff
}

.abt-pg .team-hdr .subtitle {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  color: #B9F9D8;
  max-width: 640px
}

.abt-pg .team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px
}

.abt-pg .team-card {
  background: #1a1a1a;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a
}

.abt-pg .team-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #95D7FD 50%, transparent 100%);
  transition: left .4s ease-in-out
}

.abt-pg .team-card:hover::before {
  left: 0
}

.abt-pg .team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 22px -2px #95d7fd26 0 9px 52px -2px #95d7fd2e
}

.abt-pg .team-img-wrap {
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative
}

.abt-pg .team-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .32s ease-in-out
}

.abt-pg .team-card:hover .team-img-wrap img {
  filter: brightness(1.15) saturate(1.2)
}

.abt-pg .team-info {
  padding: 28px
}

.abt-pg .team-info h3 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: #fff
}

.abt-pg .team-role {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 16px;
  color: #95D7FD;
  display: flex;
  align-items: center;
  gap: 8px
}

.abt-pg .team-role::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #B9F9D8;
  border-radius: 34px;
  display: block
}

.abt-pg .team-bio {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  color: #c4c4c4
}

.abt-pg .values-blk {
  background: #0d0d0d;
  padding: 56px 16px;
  position: relative
}

.abt-pg .values-blk::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #95D7FD 20%, #95D7FD 80%, transparent 100%)
}

.abt-pg .values-blk::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 8px;
  background: linear-gradient(90deg, transparent 0%, #93400F 50%, transparent 100%)
}

.abt-pg .values-container {
  max-width: 1280px;
  margin: 0 auto
}

.abt-pg .values-hdr {
  margin-bottom: 56px;
  text-align: center
}

.abt-pg .values-hdr h2 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 16px;
  color: #fff
}

.abt-pg .values-hdr .intro {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  color: #B9F9D8;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto
}

.abt-pg .values-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.abt-pg .value-item {
  background: #1a1a1a;
  border-radius: 11px;
  padding: 28px;
  position: relative;
  transition: background .25s ease-in-out;
  box-shadow: inset 0 2px 4px #0000004d
}

.abt-pg .value-item::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: #93400F;
  border-radius: 0 11px 0 34px;
  opacity: .2;
  transition: opacity .25s ease-in-out
}

.abt-pg .value-item:hover {
  background: #202020
}

.abt-pg .value-item:hover::before {
  opacity: .4
}

.abt-pg .value-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #95D7FD 0%, #B9F9D8 100%);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden
}

.abt-pg .value-icon::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: #1a1a1a;
  border-radius: 1px
}

.abt-pg .value-icon svg {
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 1
}

.abt-pg .value-item h3 {
  font-size: 17px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: #fff
}

.abt-pg .value-item p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  color: #c4c4c4
}

.abt-pg .metrics-blk {
  background: linear-gradient(202deg, #000 0%, #93400F 100%);
  padding: 56px 16px;
  position: relative;
  overflow: hidden
}

.abt-pg .metrics-blk::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, #b9f9d814 0%, transparent 70%);
  bottom: -180px;
  left: -100px;
  animation: drift-light-alt 10s ease-in-out infinite;
  pointer-events: none
}

@keyframes drift-light-alt {

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

  50% {
    transform: translate(80px, -60px)
  }
}

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

.abt-pg .metrics-hdr {
  margin-bottom: 56px
}

.abt-pg .metrics-hdr h2 {
  font-size: 70px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #fff
}

.abt-pg .metrics-hdr .desc {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  color: #B9F9D8;
  max-width: 680px
}

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

.abt-pg .metric-card {
  background: #1a1a1a99;
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid #95d7fd1a;
  transition: border-color .24s ease-in-out, transform .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-pg .metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, #95d7fd0d 100%);
  opacity: 0;
  transition: opacity .24s ease-in-out;
  border-radius: 20px;
  pointer-events: none
}

.abt-pg .metric-card:hover {
  border-color: #95d7fd4d;
  transform: translateY(-6px)
}

.abt-pg .metric-card:hover::before {
  opacity: 1
}

.abt-pg .metric-num {
  font-size: 70px;
  line-height: 1.1;
  margin: 0 0 8px;
  color: #95D7FD;
  font-weight: 700;
  position: relative;
  z-index: 1
}

.abt-pg .metric-label {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  color: #fff;
  position: relative;
  z-index: 1
}

@media (max-width: 1024px) {
  .abt-pg .hero-txt h1 {
    font-size: 50px
  }

  .abt-pg .story-wrap {
    gap: 28px
  }

  .abt-pg .team-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .abt-pg .values-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
  }

  .abt-pg .metrics-hdr h2 {
    font-size: 50px
  }

  .abt-pg .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
  }

  .abt-pg .metric-num {
    font-size: 50px
  }
}

@media (max-width: 768px) {
  .abt-pg .hero-abt {
    padding: 28px 16px
  }

  .abt-pg .hero-txt h1 {
    font-size: 40px
  }

  .abt-pg .hero-txt .tagline {
    font-size: 17px
  }

  .abt-pg .hero-actions {
    flex-direction: column
  }

  .abt-pg .hero-btn {
    width: 100%;
    text-align: center
  }

  .abt-pg .story-blk {
    padding: 28px 16px
  }

  .abt-pg .story-wrap {
    gap: 28px
  }

  .abt-pg .story-img-grid {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .abt-pg .team-blk {
    padding: 28px 16px
  }

  .abt-pg .team-hdr {
    margin-bottom: 28px
  }

  .abt-pg .team-hdr h2 {
    font-size: 40px
  }

  .abt-pg .values-blk {
    padding: 28px 16px
  }

  .abt-pg .values-hdr {
    margin-bottom: 28px
  }

  .abt-pg .values-list {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .abt-pg .metrics-blk {
    padding: 28px 16px
  }

  .abt-pg .metrics-hdr {
    margin-bottom: 28px
  }

  .abt-pg .metrics-hdr h2 {
    font-size: 40px
  }

  .abt-pg .metrics-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .abt-pg .metric-num {
    font-size: 40px
  }
}

@media (max-width: 360px) {
  .abt-pg .hero-txt h1 {
    font-size: 32px
  }

  .abt-pg .team-hdr h2 {
    font-size: 32px
  }

  .abt-pg .metrics-hdr h2 {
    font-size: 32px
  }

  .abt-pg .metric-num {
    font-size: 32px
  }
}

.cntct-pg {
  background: #000;
  color: #e8e8e8;
  min-height: 100vh;
  position: relative;
  overflow-x: clip
}

.cntct-pg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(157deg, #95d7fd08 0%, transparent 68%);
  pointer-events: none;
  z-index: 0
}

.cntct-pg::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(223deg, #b9f9d80a 0%, transparent 71%);
  pointer-events: none;
  z-index: 0;
  animation: bg-drift-secondary 47s ease-in-out infinite alternate
}

@keyframes bg-drift-primary {
  0% {
    transform: translate(0, 0) rotate(0deg)
  }

  100% {
    transform: translate(-8%, 6%) rotate(3deg)
  }
}

@keyframes bg-drift-secondary {
  0% {
    transform: translate(0, 0) rotate(0deg)
  }

  100% {
    transform: translate(5%, -4%) rotate(-2deg)
  }
}

.cntct-pg>* {
  position: relative;
  z-index: 1
}

.hero-banner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 28px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 28px;
  min-height: 82vh
}

.hero-banner .eyebrow {
  font-size: 14px;
  line-height: 1.4;
  color: #95D7FD;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600
}

.hero-banner .main-heading {
  font-size: 70px;
  line-height: 1.1;
  color: #fff;
  font-weight: 700;
  margin: 0;
  max-width: 920px
}

.hero-banner .img-zone {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: visible
}

.hero-banner .img-zone img {
  width: 100%;
  max-width: 780px;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 9px 52px -2px #95d7fd1f 0 4px 22px -2px #95d7fd1a 0 1px 2px -2px #95d7fd0f;
  transform: translateY(0);
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.hero-banner .img-zone img:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 68px -2px #95d7fd2e 0 8px 34px -2px #95d7fd24 0 2px 4px -2px #95d7fd14
}

.hero-banner .decorative-strokes {
  position: absolute;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none
}

.hero-banner .decorative-strokes span {
  display: block;
  height: 3px;
  background: #95D7FD;
  border-radius: 5px
}

.hero-banner .decorative-strokes span:nth-child(1) {
  width: 56px
}

.hero-banner .decorative-strokes span:nth-child(2) {
  width: 72px
}

.hero-banner .decorative-strokes span:nth-child(3) {
  width: 44px
}

.hero-banner .decorative-strokes span:nth-child(4) {
  width: 88px
}

@media (max-width: 1024px) {
  .hero-banner .main-heading {
    font-size: 56px
  }

  .hero-banner {
    min-height: 70vh
  }
}

@media (max-width: 768px) {
  .hero-banner {
    padding: 28px 16px;
    gap: 16px;
    min-height: auto
  }

  .hero-banner .main-heading {
    font-size: 42px
  }

  .hero-banner .decorative-strokes {
    bottom: 16px;
    right: 16px
  }
}

@media (max-width: 360px) {
  .hero-banner .main-heading {
    font-size: 36px
  }
}

.contact-zone {
  background: #0d0d0d;
  position: relative;
  clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 100%);
  padding: 96px 28px 56px
}

.contact-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #95d7fd05;
  backdrop-filter: blur(28px);
  pointer-events: none;
  z-index: 0
}

.contact-zone .inner-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  position: relative;
  z-index: 1
}

.contact-zone .form-area {
  background: #1a1a1a;
  padding: 56px;
  border-radius: 20px;
  box-shadow: 0 9px 52px -2px #b9f9d81f 0 4px 22px -2px #b9f9d81a 0 1px 2px -2px #b9f9d80f
}

.contact-zone .form-area .form-title {
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 28px;
  font-weight: 600;
  display: inline-block;
  background: linear-gradient(94deg, #95D7FD 0%, transparent 100%);
  padding: 8px 28px 8px 16px;
  border-radius: 5px
}

.contact-zone .form-area form {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.contact-zone .form-area .field-group {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.contact-zone .form-area label {
  font-size: 14px;
  line-height: 1.4;
  color: #B9F9D8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em
}

.contact-zone .form-area input[type="text"],
.contact-zone .form-area input[type="email"],
.contact-zone .form-area input[type="tel"],
.contact-zone .form-area textarea,
.contact-zone .form-area select {
  background: #0d0d0d;
  border: 2px solid #2a2a2a;
  border-radius: 11px;
  padding: 16px;
  font-size: 17px;
  line-height: 1.4;
  color: #e8e8e8;
  transition: border-color .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1), background .22s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%
}

.contact-zone .form-area input[type="text"]::placeholder,
.contact-zone .form-area input[type="email"]::placeholder,
.contact-zone .form-area input[type="tel"]::placeholder,
.contact-zone .form-area textarea::placeholder {
  color: #95d7fd4d
}

.contact-zone .form-area input[type="text"]:focus,
.contact-zone .form-area input[type="email"]:focus,
.contact-zone .form-area input[type="tel"]:focus,
.contact-zone .form-area textarea:focus,
.contact-zone .form-area select:focus {
  outline: none;
  border-color: #95D7FD;
  background: #111;
  box-shadow: 0 0 0 4px #95d7fd14
}

.contact-zone .form-area textarea {
  min-height: 140px;
  resize: vertical
}

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

.contact-zone .form-area .privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 8px 0
}

.contact-zone .form-area .privacy-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  cursor: pointer;
  accent-color: #95D7FD;
  flex-shrink: 0
}

.contact-zone .form-area .privacy-check label {
  font-size: 14px;
  line-height: 1.7;
  color: #c4c4c4;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  cursor: pointer
}

.contact-zone .form-area .privacy-check a {
  color: #95D7FD;
  text-decoration: underline;
  transition: color .2s ease-in-out
}

.contact-zone .form-area .privacy-check a:hover {
  color: #B9F9D8
}

.contact-zone .form-area .submit-btn {
  background: #95D7FD;
  color: #000;
  border: none;
  border-radius: 11px;
  padding: 16px 56px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease-in-out, transform .18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .18s cubic-bezier(0.4, 0, 0.2, 1);
  align-self: flex-start;
  position: relative;
  overflow: hidden
}

.contact-zone .form-area .submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #B9F9D8;
  border-radius: 11px;
  opacity: 0;
  transition: opacity .2s ease-in-out;
  pointer-events: none
}

.contact-zone .form-area .submit-btn:hover {
  background: #B9F9D8;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px -2px #95d7fd52
}

.contact-zone .form-area .submit-btn:hover::before {
  opacity: 1
}

.contact-zone .form-area .submit-btn:active {
  transform: translateY(0)
}

.contact-zone .info-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.contact-zone .info-card {
  background: #1a1a1a;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid #2a2a2a;
  transition: border-color .26s cubic-bezier(0.4, 0, 0.2, 1), transform .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-zone .info-card:hover {
  border-color: #95D7FD;
  transform: translateX(4px)
}

.contact-zone .info-card .card-label {
  font-size: 14px;
  line-height: 1.4;
  color: #B9F9D8;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .05em;
  margin: 0 0 16px
}

.contact-zone .info-card .card-value {
  font-size: 17px;
  line-height: 1.7;
  color: #e8e8e8;
  margin: 0
}

.contact-zone .info-card .card-value a {
  color: #95D7FD;
  text-decoration: none;
  transition: color .2s ease-in-out;
  display: inline-block
}

.contact-zone .info-card .card-value a:hover {
  color: #B9F9D8;
  text-decoration: underline
}

.contact-zone .visual-asset {
  margin: 28px 0 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 9px 52px -2px #95d7fd1f 0 4px 22px -2px #95d7fd1a 0 1px 2px -2px #95d7fd0f;
  position: relative
}

.contact-zone .visual-asset::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 20px;
  pointer-events: none;
  transition: border-color .32s ease-in-out
}

.contact-zone .visual-asset:hover::before {
  animation: svg-outline-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

@keyframes svg-outline-draw {
  0% {
    border-color: transparent;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0)
  }

  25% {
    border-color: #95D7FD;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)
  }

  50% {
    border-color: #95D7FD;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
  }

  75% {
    border-color: #95D7FD;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
  }

  100% {
    border-color: #95D7FD;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
  }
}

.contact-zone .visual-asset img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/3
}

.contact-zone .status-indicator {
  margin: 28px 0 0;
  background: #1a1a1a;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid #2a2a2a
}

.contact-zone .status-indicator .indicator-label {
  font-size: 14px;
  line-height: 1.4;
  color: #B9F9D8;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .05em;
  margin: 0 0 16px
}

.contact-zone .status-indicator .level-bars {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.contact-zone .status-indicator .bar-row {
  display: flex;
  align-items: center;
  gap: 16px
}

.contact-zone .status-indicator .bar-name {
  font-size: 14px;
  line-height: 1.4;
  color: #c4c4c4;
  min-width: 88px
}

.contact-zone .status-indicator .bar-track {
  flex: 1;
  height: 8px;
  background: #0d0d0d;
  border-radius: 34px;
  overflow: hidden;
  position: relative
}

.contact-zone .status-indicator .bar-fill {
  height: 100%;
  border-radius: 34px;
  transition: width .8s cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-zone .status-indicator .bar-row:nth-child(1) .bar-fill {
  background: linear-gradient(90deg, #B9F9D8 0%, #95D7FD 100%);
  width: 92%
}

.contact-zone .status-indicator .bar-row:nth-child(2) .bar-fill {
  background: linear-gradient(90deg, #95D7FD 0%, #B9F9D8 100%);
  width: 78%
}

.contact-zone .status-indicator .bar-row:nth-child(3) .bar-fill {
  background: linear-gradient(90deg, #B9F9D8 0%, #93400F 100%);
  width: 64%
}

.contact-zone .status-indicator .bar-row:nth-child(4) .bar-fill {
  background: linear-gradient(90deg, #93400F 0%, #95D7FD 100%);
  width: 86%
}

@media (max-width: 1024px) {
  .contact-zone .inner-wrap {
    grid-template-columns: 1fr;
    gap: 56px
  }

  .contact-zone .form-area {
    padding: 28px
  }

  .contact-zone .info-sidebar {
    grid-template-columns: repeat(2, 1fr);
    display: grid
  }
}

@media (max-width: 768px) {
  .contact-zone {
    padding: 56px 16px 28px
  }

  .contact-zone .inner-wrap {
    gap: 28px
  }

  .contact-zone .info-sidebar {
    grid-template-columns: 1fr;
    display: flex
  }

  .contact-zone .form-area .submit-btn {
    width: 100%
  }
}

@media (max-width: 360px) {
  .contact-zone .form-area {
    padding: 16px
  }

  .contact-zone .info-card {
    padding: 16px
  }

  .contact-zone .status-indicator {
    padding: 16px
  }

  .contact-zone .status-indicator .bar-name {
    min-width: 64px;
    font-size: 12px
  }
}

.lead-pg {
  background: #000;
  color: #e8e8e8;
  overflow-x: clip
}

.lead-pg .anim-grad-bg {
  position: relative;
  padding-top: 56px;
  padding-bottom: 112px;
  overflow: hidden;
  background: linear-gradient(217deg, #95D7FD 0%, #95d7fd1f 100%);
  animation: grad-shift 8s ease-in-out infinite alternate;
  border-bottom: 1px solid #95d7fd26
}

@keyframes grad-shift {
  0% {
    background: linear-gradient(217deg, #95D7FD 0%, #95d7fd1f 100%)
  }

  50% {
    background: linear-gradient(217deg, #B9F9D8 0%, #b9f9d81f 100%)
  }

  100% {
    background: linear-gradient(217deg, #95D7FD 0%, #95d7fd1f 100%)
  }
}

.lead-pg .anim-grad-bg::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #95d7fd4d
}

.lead-pg .anim-grad-bg .cntr-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px
}

.lead-pg .anim-grad-bg .two-lvl-txt h1 {
  font-size: 70px;
  line-height: 1.1;
  color: #000;
  margin-bottom: 28px;
  font-weight: 700
}

.lead-pg .anim-grad-bg .two-lvl-txt .prob-stmt {
  font-size: 22px;
  line-height: 1.4;
  color: #1a1a1a;
  margin-bottom: 16px;
  max-width: 820px
}

.lead-pg .anim-grad-bg .two-lvl-txt .sol-stmt {
  font-size: 17px;
  line-height: 1.7;
  color: #2d2d2d;
  max-width: 720px
}

.lead-pg .approach-reveal {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
  background: #0a0a0a;
  border-bottom: 2px dotted #95d7fd33
}

.lead-pg .approach-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><circle cx="50" cy="50" r="40" fill="none" stroke="#95d7fd08" stroke-width="2"/></svg>');
  background-size: 100px 100px;
  opacity: .4;
  pointer-events: none
}

.lead-pg .approach-reveal .cntr-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  z-index: 1
}

.lead-pg .approach-reveal .hdr-strip {
  display: inline-block;
  background: linear-gradient(128deg, #95D7FD, transparent);
  padding: 8px 28px;
  border-radius: 5px;
  margin-bottom: 28px
}

.lead-pg .approach-reveal .hdr-strip h2 {
  font-size: 22px;
  line-height: 1.4;
  color: #000;
  margin: 0;
  font-weight: 600
}

.lead-pg .approach-reveal .grid-appr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 28px
}

.lead-pg .approach-reveal .appr-card {
  background: #141414;
  padding: 28px;
  border-radius: 11px;
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f;
  border: 1px solid #95d7fd1a;
  transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden
}

.lead-pg .approach-reveal .appr-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #95D7FD, transparent)
}

.lead-pg .approach-reveal .appr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px -2px #95d7fd1f 0 4px 22px -2px #95d7fd33 0 9px 52px -2px #95d7fd3d
}

.lead-pg .approach-reveal .appr-card h3 {
  font-size: 17px;
  line-height: 1.4;
  color: #95D7FD;
  margin-bottom: 16px;
  font-weight: 600
}

.lead-pg .approach-reveal .appr-card p {
  font-size: 14px;
  line-height: 1.7;
  color: silver;
  margin: 0
}

.lead-pg .approach-reveal .img-showcase {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f
}

.lead-pg .approach-reveal .img-showcase img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover
}

.lead-pg .long-val-depth {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
  background: #000;
  border-bottom: 2px dotted #b9f9d833
}

.lead-pg .long-val-depth::before {
  content: '';
  position: absolute;
  top: 28px;
  right: 28px;
  width: 320px;
  height: 320px;
  border: 2px solid #b9f9d826;
  border-radius: 34px;
  pointer-events: none
}

.lead-pg .long-val-depth .cntr-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px
}

.lead-pg .long-val-depth .hdr-strip {
  display: inline-block;
  background: linear-gradient(73deg, #B9F9D8, transparent);
  padding: 8px 28px;
  border-radius: 5px;
  margin-bottom: 28px
}

.lead-pg .long-val-depth .hdr-strip h2 {
  font-size: 22px;
  line-height: 1.4;
  color: #000;
  margin: 0;
  font-weight: 600
}

.lead-pg .long-val-depth .comp-tbl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px
}

.lead-pg .comp-tbl .opt-col {
  background: #141414;
  padding: 28px;
  border-radius: 11px;
  border: 1px solid #b9f9d81a;
  box-shadow: inset 0 2px 4px #0000004d;
  transition: border-color .18s ease-in-out
}

.lead-pg .comp-tbl .opt-col.recom {
  border: 2px solid #B9F9D8;
  box-shadow: 0 1px 2px -2px #b9f9d80f 0 4px 22px -2px #b9f9d81a 0 9px 52px -2px #b9f9d81f inset 0 2px 4px #0000004d;
  position: relative
}

.lead-pg .comp-tbl .opt-col.recom::after {
  content: 'Doporučeno';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #B9F9D8;
  color: #000;
  padding: 4px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600
}

.lead-pg .comp-tbl .opt-col h4 {
  font-size: 17px;
  line-height: 1.4;
  color: #B9F9D8;
  margin-bottom: 16px;
  font-weight: 600
}

.lead-pg .comp-tbl .opt-col p {
  font-size: 14px;
  line-height: 1.7;
  color: silver;
  margin: 0
}

.lead-pg .long-val-depth .img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.lead-pg .long-val-depth .img-pair .img-box {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px -2px #b9f9d80f 0 4px 22px -2px #b9f9d81a 0 9px 52px -2px #b9f9d81f
}

.lead-pg .long-val-depth .img-pair .img-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover
}

.lead-pg .gap-bridge {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
  background: #0a0a0a;
  overflow: hidden
}

.lead-pg .gap-bridge .cntr-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px
}

.lead-pg .gap-bridge .hdr-strip {
  display: inline-block;
  background: linear-gradient(162deg, #93400F, transparent);
  padding: 8px 28px;
  border-radius: 5px;
  margin-bottom: 28px
}

.lead-pg .gap-bridge .hdr-strip h2 {
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  font-weight: 600
}

.lead-pg .gap-bridge .flx-row {
  display: flex;
  flex-direction: row;
  gap: 56px;
  align-items: flex-start
}

.lead-pg .gap-bridge .txt-col {
  flex: 1;
  animation: expand-height .6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden
}

@keyframes expand-height {
  from {
    max-height: 0;
    opacity: 0
  }

  to {
    max-height: 800px;
    opacity: 1
  }
}

.lead-pg .gap-bridge .txt-col h3 {
  font-size: 17px;
  line-height: 1.4;
  color: #95D7FD;
  margin-bottom: 16px;
  font-weight: 600
}

.lead-pg .gap-bridge .txt-col p {
  font-size: 14px;
  line-height: 1.7;
  color: silver;
  margin-bottom: 16px
}

.lead-pg .gap-bridge .txt-col p:last-child {
  margin-bottom: 0
}

.lead-pg .gap-bridge .img-col {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f;
  animation: gentle-shake 3s ease-in-out infinite
}

@keyframes gentle-shake {

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

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

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

.lead-pg .gap-bridge .img-col img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover
}

.lead-pg .gap-bridge .cta-btn {
  display: inline-block;
  background: #95D7FD;
  color: #000;
  padding: 16px 56px;
  border-radius: 11px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 28px !important;
  transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a;
  border: 2px solid transparent
}

.lead-pg .gap-bridge .cta-btn:hover {
  background: #B9F9D8;
  box-shadow: 0 1px 2px -2px #b9f9d80f 0 4px 22px -2px #b9f9d81a 0 9px 52px -2px #b9f9d81f;
  border: 2px solid #95D7FD
}

.lead-pg .gap-bridge .cta-btn:active {
  transform: scale(0.98)
}

@media (max-width: 1024px) {
  .lead-pg .anim-grad-bg .two-lvl-txt h1 {
    font-size: 56px
  }

  .lead-pg .approach-reveal .grid-appr {
    grid-template-columns: 1fr
  }

  .lead-pg .long-val-depth .comp-tbl {
    grid-template-columns: 1fr
  }

  .lead-pg .gap-bridge .flx-row {
    flex-direction: column;
    gap: 28px
  }
}

@media (max-width: 768px) {
  .lead-pg .anim-grad-bg {
    padding-top: 28px;
    padding-bottom: 56px
  }

  .lead-pg .anim-grad-bg .two-lvl-txt h1 {
    font-size: 42px
  }

  .lead-pg .anim-grad-bg .two-lvl-txt .prob-stmt {
    font-size: 17px
  }

  .lead-pg .anim-grad-bg .two-lvl-txt .sol-stmt {
    font-size: 14px
  }

  .lead-pg .approach-reveal,
  .lead-pg .long-val-depth,
  .lead-pg .gap-bridge {
    padding-top: 28px;
    padding-bottom: 28px
  }

  .lead-pg .long-val-depth .img-pair {
    grid-template-columns: 1fr
  }

  .lead-pg .long-val-depth::before {
    width: 180px;
    height: 180px;
    right: 16px;
    top: 16px
  }
}

@media (max-width: 360px) {
  .lead-pg .anim-grad-bg .two-lvl-txt h1 {
    font-size: 32px
  }

  .lead-pg .approach-reveal .appr-card,
  .lead-pg .comp-tbl .opt-col {
    padding: 16px
  }

  .lead-pg .gap-bridge .cta-btn {
    padding: 16px 28px;
    width: 100%;
    text-align: center
  }
}

.success-page {
  background: #000;
  color: #e8e8e8;
  min-height: 100vh;
  padding: 56px 16px
}

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

.success-page .confirmation-block {
  background: linear-gradient(217deg, #95D7FD 0%, transparent 100%);
  border-radius: 20px;
  padding: 56px 28px;
  text-align: center;
  margin: 0 0 56px;
  box-shadow: 0 1px 2px -2px #95d7fd0f 0 4px 22px -2px #95d7fd1a 0 9px 52px -2px #95d7fd1f
}

.success-page .confirmation-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 28px;
  border: 4px solid #95D7FD;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #95d7fd14
}

.success-page .confirmation-icon svg {
  width: 64px;
  height: 64px;
  stroke: #95D7FD;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.success-page .confirmation-block h1 {
  font-size: 70px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #fff
}

.success-page .confirmation-block .lead-text {
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
  color: #e8e8e8
}

.success-page .info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 0 0 56px
}

.success-page .info-card {
  background: #1a1a1a;
  border-radius: 11px;
  padding: 28px;
  border: 1px solid #2a2a2a;
  transition: border-color .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.success-page .info-card:hover {
  border-color: #95D7FD
}

.success-page .info-card h2 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 16px;
  color: #95D7FD;
  display: inline-block;
  background: #95d7fd1f;
  padding: 8px 16px;
  border-radius: 5px
}

.success-page .info-card p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 16px
}

.success-page .info-card p:last-child {
  margin: 0
}

.success-page .info-card .detail-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px
}

.success-page .info-card .detail-line:last-child {
  margin: 0
}

.success-page .info-card .detail-label {
  font-size: 14px;
  color: #B9F9D8;
  min-width: 100px
}

.success-page .info-card .detail-value {
  font-size: 17px;
  color: #fff
}

.success-page .contact-section {
  background: #0d0d0d;
  border-radius: 20px;
  padding: 56px 28px;
  margin: 0 0 56px;
  text-align: center
}

.success-page .contact-section h3 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 28px;
  color: #fff
}

.success-page .contact-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto
}

.success-page .contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #b9f9d80f;
  border-radius: 11px;
  border: 1px solid transparent;
  transition: border-color .22s ease-in-out, background-color .22s ease-in-out;
  text-decoration: none;
  color: #e8e8e8
}

.success-page .contact-item:hover {
  border-color: #B9F9D8;
  background: #b9f9d81f
}

.success-page .contact-item .icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: #b9f9d826;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.success-page .contact-item .icon-wrapper svg {
  width: 22px;
  height: 22px;
  stroke: #B9F9D8;
  stroke-width: 2;
  fill: none
}

.success-page .contact-item .contact-text {
  font-size: 17px;
  text-align: left;
  flex-grow: 1
}

.success-page .action-block {
  text-align: center
}

.success-page .home-btn {
  display: inline-block;
  padding: 16px 56px;
  background: #93400F;
  color: #fff;
  font-size: 17px;
  border: 2px solid #93400F;
  border-radius: 11px;
  text-decoration: none;
  transition: background-color .26s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .26s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer
}

.success-page .home-btn:hover {
  background: #a84a11;
  border-color: #a84a11;
  box-shadow: 0 0 0 2px #93400F
}

@media (min-width: 768px) {
  .success-page {
    padding: 56px 28px
  }

  .success-page .confirmation-block {
    padding: 56px
  }

  .success-page .info-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .success-page .contact-section {
    padding: 56px
  }
}

@media (min-width: 1024px) {
  .success-page .info-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}