html {
  margin: 0;
  box-sizing: border-box;
  font-size: 100%
}

body {
  margin: 0;
  font-family: 'Noto Serif', serif;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
  background: #FFF;
  color: #1a1a1a
}

::selection {
  background: #4b3c8d1a
}

:focus-visible {
  outline: 3px solid #FF8D0D;
  outline-offset: 2px
}

.siteHeader {
  position: relative;
  background: linear-gradient(135deg, #fffffff2 0%, #ffffffd9 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #4b3c8d1f;
  box-shadow: -1px 3px 6px -2px #4b3c8d0d;
  z-index: 100
}

.headerInner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px
}

.topUtility {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  padding: 16px 0;
  border-bottom: 1px solid #4b3c8d14
}

.utilityLink {
  font-size: 13px;
  color: #4B3C8D;
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.utilityLink:hover {
  color: #FF8D0D
}

.mainHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 40px
}

.logoZone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 2px solid #FF8D0D;
  border-bottom: 2px solid #4B3C8D;
  padding: 16px 0;
  background: #fff9;
  box-shadow: -1px 3px 6px -2px #4b3c8d14
}

.logoImage {
  width: 56px;
  height: 56px;
  object-fit: contain
}

.logoTag {
  font-size: 13px;
  color: #4B3C8D;
  font-weight: 400
}

.primaryNav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  flex: 1;
  justify-content: center
}

.navItem {
  font-size: 21px;
  color: #1a1a1a;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: color .5s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent
}

.navItem::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FF8D0D 0%, #4B3C8D 100%);
  transition: left .55s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1
}

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

.navItem:hover {
  color: #FFF
}

.headerAction {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  background: transparent;
  border: 2px solid #FF8D0D;
  border-radius: 40px;
  font-size: 21px;
  color: #FF8D0D;
  text-decoration: none;
  font-weight: 700;
  transition: background .45s ease-in-out, color .45s ease-in-out;
  box-shadow: -1px 6px 18px -2px #ff8d0d14
}

.headerAction:hover {
  background: #FF8D0D;
  color: #FFF
}

@media (max-width: 1280px) {
  .headerInner {
    padding: 0 16px
  }

  .mainHeaderRow {
    flex-wrap: wrap
  }

  .primaryNav {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 0
  }
}

@media (max-width: 768px) {
  .topUtility {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center
  }

  .navItem {
    font-size: 21px;
    padding: 8px 16px
  }

  .headerAction {
    padding: 16px 40px;
    width: 100%;
    justify-content: center
  }

  .logoZone {
    padding: 8px 0
  }
}

@media (max-width: 390px) {
  .utilityLink {
    font-size: 13px
  }

  .navItem {
    font-size: 21px
  }
}

.siteFooter {
  background: #1a1a1a;
  color: #FFF;
  padding: 80px 0 40px;
  margin-top: 80px
}

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

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

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

.footerLogo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 8px;
  background: #FFF;
  border-radius: 3px;
  box-shadow: -1px 6px 18px -2px #ff8d0d14
}

.footerContact {
  font-size: 13px;
  line-height: 1.55;
  color: #ffffffbf
}

.footerContactItem {
  margin-bottom: 8px
}

.footerContactLink {
  color: #ffffffbf;
  text-decoration: none;
  transition: color .4s ease-in-out
}

.footerContactLink:hover {
  color: #FF8D0D
}

.footerNav {
  display: flex;
  flex-direction: column;
  gap: 40px
}

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

.navSectionTitle {
  font-size: 28px;
  font-weight: 700;
  color: #FF8D0D;
  margin-bottom: 8px
}

.footerNavList {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  list-style: none;
  padding: 0;
  margin: 0
}

.footerNavLink {
  font-size: 21px;
  color: #FFF;
  text-decoration: none;
  transition: color .5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative
}

.footerNavLink::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #FF8D0D;
  transition: width .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.footerNavLink:hover {
  color: #FF8D0D
}

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

.trustBlock {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  background: linear-gradient(135deg, #4b3c8d26 0%, #ff8d0d0d 100%);
  border-radius: 3px;
  border-left: 4px solid #4B3C8D
}

.trustTitle {
  font-size: 21px;
  font-weight: 700;
  color: #FFF
}

.trustText {
  font-size: 13px;
  line-height: 1.55;
  color: #ffffffd9
}

.footerBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 40px;
  border-top: 1px solid #ffffff26
}

.copyright {
  font-size: 13px;
  color: #fff9
}

.legalNav {
  display: flex;
  gap: 40px;
  flex-wrap: wrap
}

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

.legalLink:hover {
  color: #FF8D0D
}

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

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

  .siteFooter {
    padding: 40px 0
  }

  .footerGrid {
    margin-bottom: 40px
  }

  .trustBlock {
    padding: 16px
  }

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

  .legalNav {
    gap: 16px
  }
}

.terms-jvhe-wrapper {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 16px
}

.terms-jvhe-wrapper h1 {
  font-size: 66px;
  line-height: 1.1;
  margin-bottom: 40px;
  color: #4B3C8D
}

.terms-jvhe-wrapper h2 {
  font-size: 38px;
  line-height: 1.1;
  margin-top: 80px;
  margin-bottom: 40px;
  color: #4B3C8D
}

.terms-jvhe-wrapper h3 {
  font-size: 28px;
  line-height: 1.1;
  margin-top: 40px;
  margin-bottom: 16px;
  color: #4B3C8D
}

.terms-jvhe-wrapper h4 {
  font-size: 21px;
  line-height: 1.55;
  margin-top: 40px;
  margin-bottom: 16px;
  color: #4B3C8D
}

.terms-jvhe-wrapper h5 {
  font-size: 21px;
  line-height: 1.55;
  margin-top: 40px;
  margin-bottom: 16px;
  color: #4B3C8D
}

.terms-jvhe-wrapper h6 {
  font-size: 21px;
  line-height: 1.55;
  margin-top: 40px;
  margin-bottom: 16px;
  color: #4B3C8D
}

.terms-jvhe-wrapper p {
  font-size: 21px;
  line-height: 1.55;
  margin-bottom: 16px;
  color: #1a1a1a
}

.terms-jvhe-wrapper strong,
.terms-jvhe-wrapper b {
  font-weight: 600;
  color: #1a1a1a
}

.terms-jvhe-wrapper a {
  color: #FF8D0D;
  text-decoration: none;
  transition-property: color;
  transition-duration: .42s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1)
}

.terms-jvhe-wrapper a:hover {
  color: #4B3C8D
}

.terms-jvhe-wrapper div {
  margin-bottom: 16px
}

.terms-jvhe-wrapper h1:first-child {
  margin-top: 0
}

.terms-jvhe-wrapper h2:first-child,
.terms-jvhe-wrapper h3:first-child,
.terms-jvhe-wrapper h4:first-child,
.terms-jvhe-wrapper h5:first-child,
.terms-jvhe-wrapper h6:first-child {
  margin-top: 0
}

.terms-jvhe-wrapper p:last-child,
.terms-jvhe-wrapper div:last-child {
  margin-bottom: 0
}

@media (max-width: 768px) {
  .terms-jvhe-wrapper {
    padding-top: 40px;
    padding-bottom: 40px
  }

  .terms-jvhe-wrapper h1 {
    font-size: 38px;
    margin-bottom: 16px
  }

  .terms-jvhe-wrapper h2 {
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 16px
  }

  .terms-jvhe-wrapper h3 {
    font-size: 21px;
    margin-top: 16px;
    margin-bottom: 8px
  }

  .terms-jvhe-wrapper h4,
  .terms-jvhe-wrapper h5,
  .terms-jvhe-wrapper h6 {
    font-size: 21px;
    margin-top: 16px;
    margin-bottom: 8px
  }

  .terms-jvhe-wrapper p {
    font-size: 21px;
    margin-bottom: 16px
  }
}

@media (max-width: 390px) {
  .terms-jvhe-wrapper {
    padding-left: 8px;
    padding-right: 8px
  }
}

.homePage {
  background: #f8f9fa;
  overflow-x: clip
}

.homePage .topSection {
  background: #FFF;
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 40px 40px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: center
}

.homePage .topSection .textArea {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.homePage .topSection h1 {
  font-size: 66px;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0
}

.homePage .topSection .introText {
  font-size: 21px;
  line-height: 1.55;
  color: #4a4a4a;
  margin: 0
}

.homePage .topSection .descriptionBlock {
  font-size: 21px;
  line-height: 1.55;
  color: #4a4a4a;
  margin: 0;
  column-count: 2;
  column-gap: 40px
}

.homePage .topSection .imageStrip {
  width: 280px;
  height: 520px;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: -1px 6px 18px -2px #4b3c8d14
}

.homePage .topSection .imageStrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2);
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.homePage .topSection .imageStrip:hover img {
  transform: scale(1.08)
}

.homePage .servicesGrid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 40px;
  background: linear-gradient(135deg, #ff8d0d05 0%, #4b3c8d08 100%)
}

.homePage .servicesGrid h2 {
  font-size: 38px;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0 0 40px;
  background: linear-gradient(90deg, #FF8D0D 0%, #4B3C8D 100%);
  display: inline-block;
  padding: 8px 16px;
  color: #FFF;
  border-radius: 3px
}

.homePage .servicesGrid .gridContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px
}

.homePage .servicesGrid .serviceCard {
  background: #FFF;
  border-radius: 40px;
  padding: 40px;
  box-shadow: -1px 3px 6px -2px #ff8d0d0d;
  transition: box-shadow .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(40px);
  animation: revealCard .6s ease-out forwards
}

.homePage .servicesGrid .serviceCard:nth-child(1) {
  animation-delay: .1s
}

.homePage .servicesGrid .serviceCard:nth-child(2) {
  animation-delay: .2s
}

.homePage .servicesGrid .serviceCard:nth-child(3) {
  animation-delay: .3s
}

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

.homePage .servicesGrid .serviceCard:hover {
  box-shadow: -1px 9px 52px -2px #4b3c8d24;
  transform: translateY(-8px)
}

.homePage .servicesGrid .cardImage {
  width: 100%;
  height: 200px;
  border-radius: 3px;
  overflow: hidden
}

.homePage .servicesGrid .cardImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease-in-out
}

.homePage .servicesGrid .serviceCard:hover .cardImage img {
  transform: scale(1.12)
}

.homePage .servicesGrid .serviceCard h3 {
  font-size: 28px;
  line-height: 1.1;
  color: #4B3C8D;
  margin: 0
}

.homePage .servicesGrid .serviceCard p {
  font-size: 13px;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0
}

.homePage .dividerWaves {
  height: 80px;
  position: relative;
  background: #f8f9fa
}

.homePage .dividerWaves::before,
.homePage .dividerWaves::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px
}

.homePage .dividerWaves::before {
  top: 30px;
  background: linear-gradient(90deg, transparent 0%, #FF8D0D 20%, #4B3C8D 80%, transparent 100%);
  clip-path: path('M0,0 Q250,20 500,0 T1000,0 T1500,0 T2000,0')
}

.homePage .dividerWaves::after {
  top: 50px;
  background: linear-gradient(90deg, transparent 0%, #4B3C8D 20%, #FF8D0D 80%, transparent 100%);
  clip-path: path('M0,0 Q250,20 500,0 T1000,0 T1500,0 T2000,0')
}

.homePage .processBlock {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 40px;
  background: #FFF;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 40px
}

.homePage .processBlock .leftSidebar {
  position: sticky;
  top: 40px;
  height: fit-content
}

.homePage .processBlock h2 {
  font-size: 38px;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0 0 16px
}

.homePage .processBlock .sidebarImage {
  width: 100%;
  height: 340px;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: -1px 6px 18px -2px #ff8d0d14
}

.homePage .processBlock .sidebarImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease-in-out
}

.homePage .processBlock:hover .sidebarImage img {
  transform: scale(1.05) translateX(-4px)
}

.homePage .processBlock .contentArea {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.homePage .processBlock .stepItem {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: start;
  opacity: 0;
  transform: translateX(-40px);
  animation: slideInStep .5s ease-out forwards
}

.homePage .processBlock .stepItem:nth-child(1) {
  animation-delay: .15s
}

.homePage .processBlock .stepItem:nth-child(2) {
  animation-delay: .3s
}

.homePage .processBlock .stepItem:nth-child(3) {
  animation-delay: .45s
}

.homePage .processBlock .stepItem:nth-child(4) {
  animation-delay: .6s
}

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

.homePage .processBlock .stepNumber {
  width: 80px;
  height: 80px;
  border-radius: 3px;
  background: linear-gradient(135deg, #FF8D0D 0%, #4B3C8D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  line-height: 1.1;
  color: #FFF;
  font-weight: 600;
  box-shadow: -1px 3px 6px -2px #4b3c8d0d
}

.homePage .processBlock .stepContent h3 {
  font-size: 28px;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0 0 8px
}

.homePage .processBlock .stepContent p {
  font-size: 13px;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0
}

.homePage .metricsSection {
  background: linear-gradient(180deg, #4B3C8D 0%, #342969 100%);
  padding: 80px 40px
}

.homePage .metricsSection .metricsWrapper {
  max-width: 1320px;
  margin: 0 auto
}

.homePage .metricsSection h2 {
  font-size: 38px;
  line-height: 1.1;
  color: #FFF;
  margin: 0 0 40px;
  text-align: center
}

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

.homePage .metricsSection .metricBox {
  background: #ffffff14;
  border-radius: 3px;
  padding: 40px;
  text-align: center;
  border: 1px solid #ffffff1f;
  transition: background .4s ease-in-out, transform .4s ease-in-out;
  opacity: 0;
  transform: scale(0.9);
  animation: popIn .5s ease-out forwards
}

.homePage .metricsSection .metricBox:nth-child(1) {
  animation-delay: .1s
}

.homePage .metricsSection .metricBox:nth-child(2) {
  animation-delay: .2s
}

.homePage .metricsSection .metricBox:nth-child(3) {
  animation-delay: .3s
}

.homePage .metricsSection .metricBox:nth-child(4) {
  animation-delay: .4s
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: scale(1)
  }
}

.homePage .metricsSection .metricBox:hover {
  background: #ff8d0d26;
  transform: scale(1.05)
}

.homePage .metricsSection .metricValue {
  font-size: 66px;
  line-height: 1.1;
  color: #FF8D0D;
  margin: 0 0 8px;
  font-weight: 700
}

.homePage .metricsSection .metricLabel {
  font-size: 21px;
  line-height: 1.55;
  color: #FFF;
  margin: 0
}

.homePage .ctaBlock {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 40px;
  background: #FFF;
  text-align: center
}

.homePage .ctaBlock h2 {
  font-size: 38px;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0 0 16px
}

.homePage .ctaBlock p {
  font-size: 21px;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0 0 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto
}

.homePage .ctaBlock .buttonGroup {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center
}

.homePage .ctaBlock .btnPrimary {
  background: transparent;
  color: #FF8D0D;
  border: 2px solid #FF8D0D;
  padding: 16px 40px;
  font-size: 21px;
  line-height: 1.1;
  border-radius: 40px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: color .5s cubic-bezier(0.16, 1, 0.3, 1)
}

.homePage .ctaBlock .btnPrimary::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(135deg, #FF8D0D 0%, #4B3C8D 100%);
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(-100%) translateY(-100%);
  z-index: -1
}

.homePage .ctaBlock .btnPrimary:hover::before {
  transform: translateX(0) translateY(0)
}

.homePage .ctaBlock .btnPrimary:hover {
  color: #FFF
}

.homePage .ctaBlock .btnSecondary {
  background: transparent;
  color: #4B3C8D;
  border: 2px solid #4B3C8D;
  padding: 16px 40px;
  font-size: 21px;
  line-height: 1.1;
  border-radius: 40px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: color .5s cubic-bezier(0.16, 1, 0.3, 1)
}

.homePage .ctaBlock .btnSecondary::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: #4B3C8D;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(-100%) translateY(-100%);
  z-index: -1
}

.homePage .ctaBlock .btnSecondary:hover::before {
  transform: translateX(0) translateY(0)
}

.homePage .ctaBlock .btnSecondary:hover {
  color: #FFF
}

@media (max-width: 1280px) {
  .homePage .topSection {
    grid-template-columns: 1fr;
    padding: 80px 40px 40px
  }

  .homePage .topSection .imageStrip {
    width: 100%;
    height: 400px;
    margin-top: 40px
  }

  .homePage .topSection .descriptionBlock {
    column-count: 1
  }

  .homePage .servicesGrid .gridContainer {
    grid-template-columns: 1fr 1fr
  }

  .homePage .processBlock {
    grid-template-columns: 1fr
  }

  .homePage .processBlock .leftSidebar {
    position: relative;
    top: 0
  }

  .homePage .metricsSection .metricsGrid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width: 768px) {
  .homePage .topSection {
    padding: 40px 16px
  }

  .homePage .topSection h1 {
    font-size: 38px
  }

  .homePage .topSection .introText,
  .homePage .topSection .descriptionBlock {
    font-size: 13px
  }

  .homePage .servicesGrid {
    padding: 40px 16px
  }

  .homePage .servicesGrid h2 {
    font-size: 28px
  }

  .homePage .servicesGrid .gridContainer {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .homePage .servicesGrid .serviceCard {
    padding: 16px;
    border-radius: 3px
  }

  .homePage .servicesGrid .serviceCard h3 {
    font-size: 21px
  }

  .homePage .dividerWaves {
    height: 40px
  }

  .homePage .processBlock {
    padding: 40px 16px
  }

  .homePage .processBlock h2 {
    font-size: 28px
  }

  .homePage .processBlock .stepItem {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .homePage .processBlock .stepNumber {
    width: 60px;
    height: 60px;
    font-size: 28px
  }

  .homePage .processBlock .stepContent h3 {
    font-size: 21px
  }

  .homePage .metricsSection {
    padding: 40px 16px
  }

  .homePage .metricsSection h2 {
    font-size: 28px
  }

  .homePage .metricsSection .metricsGrid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .homePage .metricsSection .metricBox {
    padding: 16px
  }

  .homePage .metricsSection .metricValue {
    font-size: 38px
  }

  .homePage .metricsSection .metricLabel {
    font-size: 13px
  }

  .homePage .ctaBlock {
    padding: 40px 16px
  }

  .homePage .ctaBlock h2 {
    font-size: 28px
  }

  .homePage .ctaBlock p {
    font-size: 13px
  }

  .homePage .ctaBlock .buttonGroup {
    flex-direction: column;
    width: 100%
  }

  .homePage .ctaBlock .btnPrimary,
  .homePage .ctaBlock .btnSecondary {
    width: 100%;
    font-size: 13px
  }
}

@media (max-width: 390px) {
  .homePage .topSection h1 {
    font-size: 28px
  }

  .homePage .topSection .imageStrip {
    height: 320px
  }
}

.taxCoachPage {
  background: #FFF;
  color: #1a1a1a;
  min-height: 100vh
}

.taxCoachPage .heroArea {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  overflow: hidden
}

.taxCoachPage .heroArea::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, #ff8d0d1f, #4b3c8d14, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0
}

.taxCoachPage .heroContent {
  position: relative;
  z-index: 2;
  animation: slideFromLeft .85s cubic-bezier(0.16, 1, 0.3, 1)
}

@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-60px)
  }

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

.taxCoachPage .heroContent h1 {
  font-size: 66px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #1a1a1a
}

.taxCoachPage .heroContent .description {
  font-size: 21px;
  line-height: 1.55;
  margin: 0 0 40px;
  color: #4a4a4a
}

.taxCoachPage .actionLinks {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.taxCoachPage .actionLinks a {
  font-size: 21px;
  color: #FF8D0D;
  text-decoration: none;
  padding: 16px 40px;
  border: 2px solid #FF8D0D;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: color .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.taxCoachPage .actionLinks a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #FF8D0D;
  transform: skewX(-20deg);
  transition: left .5s ease-in-out;
  z-index: -1
}

.taxCoachPage .actionLinks a:hover::before {
  left: 150%
}

.taxCoachPage .actionLinks a:hover {
  color: #4B3C8D
}

.taxCoachPage .heroVisual {
  position: relative;
  z-index: 2;
  animation: slideFromRight .85s cubic-bezier(0.16, 1, 0.3, 1)
}

@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(60px)
  }

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

.taxCoachPage .heroVisual img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 3px;
  filter: sepia(0.08) saturate(1.1) hue-rotate(-5deg);
  box-shadow: -1px 9px 52px -2px #4b3c8d24
}

.taxCoachPage .cornerDecor {
  position: absolute;
  pointer-events: none;
  z-index: 1
}

.taxCoachPage .cornerDecor.topLeft {
  top: 40px;
  left: 16px;
  width: 80px;
  height: 80px;
  border-top: 2px solid #ff8d0d4d;
  border-left: 2px solid #ff8d0d4d
}

.taxCoachPage .cornerDecor.bottomRight {
  bottom: 40px;
  right: 16px;
  width: 60px;
  height: 60px;
  border-bottom: 2px solid #4b3c8d4d;
  border-right: 2px solid #4b3c8d4d
}

.taxCoachPage .dividerPencil {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px
}

.taxCoachPage .dividerPencil svg {
  width: 100%;
  height: 4px
}

.taxCoachPage .methodologyBlock {
  background: linear-gradient(135deg, #f9f9f9 0%, #fff 100%);
  padding: 80px 16px
}

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

.taxCoachPage .methodologyInner h2 {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 40px;
  color: #1a1a1a
}

.taxCoachPage .methodologyContent {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 40px
}

.taxCoachPage .methodologyContent p {
  font-size: 21px;
  line-height: 1.55;
  margin: 0 0 16px;
  color: #3a3a3a
}

.taxCoachPage .methodologyContent p:last-child {
  margin: 0
}

.taxCoachPage .stepsContainer {
  background: #FFF;
  padding: 80px 16px
}

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

.taxCoachPage .stepsInner h2 {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 40px;
  color: #1a1a1a;
  display: inline-block;
  background: linear-gradient(90deg, #ff8d0d26, #4b3c8d26);
  padding: 8px 16px;
  border-radius: 3px
}

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

.taxCoachPage .stepCard {
  background: #FFF;
  padding: 40px;
  border-radius: 40px;
  box-shadow: -1px 6px 18px -2px #ff8d0d14;
  position: relative;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.taxCoachPage .stepCard:hover {
  transform: translateY(-8px);
  box-shadow: -1px 9px 52px -2px #4b3c8d24
}

.taxCoachPage .stepNum {
  font-size: 66px;
  line-height: 1.1;
  color: #ff8d0d33;
  margin: 0 0 16px;
  font-weight: 700
}

.taxCoachPage .stepCard h3 {
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #4B3C8D
}

.taxCoachPage .stepCard p {
  font-size: 21px;
  line-height: 1.55;
  margin: 0;
  color: #4a4a4a
}

.taxCoachPage .benefitsWrap {
  background: linear-gradient(180deg, #FFF 0%, #f5f5f5 100%);
  padding: 80px 16px;
  position: relative
}

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

.taxCoachPage .benefitsInner h2 {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #1a1a1a
}

.taxCoachPage .benefitsIntro {
  font-size: 21px;
  line-height: 1.55;
  margin: 0 0 40px;
  color: #3a3a3a
}

.taxCoachPage .benefitsList {
  display: flex;
  flex-wrap: wrap;
  gap: 16px
}

.taxCoachPage .benefitItem {
  display: inline-flex;
  align-items: center;
  font-size: 21px;
  line-height: 1.55;
  color: #2a2a2a
}

.taxCoachPage .benefitItem::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #FF8D0D;
  border-radius: 40px;
  margin-right: 8px;
  flex-shrink: 0
}

.taxCoachPage .benefitItem::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 16px;
  background: #4b3c8d4d;
  margin: 0 16px
}

.taxCoachPage .benefitItem:last-child::after {
  display: none
}

.taxCoachPage .resultsBlock {
  background: #FFF;
  padding: 80px 16px
}

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

.taxCoachPage .resultsInner h2 {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 40px;
  color: #1a1a1a
}

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

.taxCoachPage .metricBox {
  background: linear-gradient(135deg, #ff8d0d0d, #4b3c8d0d);
  padding: 40px;
  border-radius: 3px;
  text-align: center;
  border: 1px solid #4b3c8d1a;
  position: relative;
  overflow: hidden
}

.taxCoachPage .metricBox::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FF8D0D, #4B3C8D);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease-in-out
}

.taxCoachPage .metricBox:hover::before {
  transform: scaleX(1)
}

.taxCoachPage .metricValue {
  font-size: 66px;
  line-height: 1.1;
  color: #4B3C8D;
  margin: 0 0 8px;
  font-weight: 700
}

.taxCoachPage .metricLabel {
  font-size: 21px;
  line-height: 1.55;
  color: #3a3a3a;
  margin: 0
}

@media (max-width: 1280px) {
  .taxCoachPage .heroArea {
    grid-template-columns: 1fr;
    padding: 40px 16px
  }

  .taxCoachPage .heroContent h1 {
    font-size: 38px
  }

  .taxCoachPage .stepsGrid {
    grid-template-columns: 1fr
  }

  .taxCoachPage .metricsGrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 768px) {
  .taxCoachPage .heroContent h1 {
    font-size: 28px
  }

  .taxCoachPage .heroContent .description {
    font-size: 21px
  }

  .taxCoachPage .heroVisual img {
    height: 320px
  }

  .taxCoachPage .methodologyContent {
    grid-template-columns: 1fr
  }

  .taxCoachPage .methodologyInner h2,
  .taxCoachPage .stepsInner h2,
  .taxCoachPage .benefitsInner h2,
  .taxCoachPage .resultsInner h2 {
    font-size: 28px
  }

  .taxCoachPage .stepNum {
    font-size: 38px
  }

  .taxCoachPage .stepCard h3 {
    font-size: 21px
  }

  .taxCoachPage .metricValue {
    font-size: 38px
  }

  .taxCoachPage .metricsGrid {
    grid-template-columns: 1fr
  }

  .taxCoachPage .benefitsList {
    flex-direction: column
  }

  .taxCoachPage .benefitItem::after {
    display: none
  }
}

@media (max-width: 390px) {
  .taxCoachPage .heroArea {
    padding: 40px 8px
  }

  .taxCoachPage .actionLinks {
    flex-direction: column
  }

  .taxCoachPage .actionLinks a {
    text-align: center
  }

  .taxCoachPage .methodologyBlock,
  .taxCoachPage .stepsContainer,
  .taxCoachPage .benefitsWrap,
  .taxCoachPage .resultsBlock {
    padding: 40px 8px
  }

  .taxCoachPage .stepCard {
    padding: 16px
  }
}

.contactMainWrap {
  background: #FFF;
  color: #1a1a1a;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision
}

.contactMainWrap .heroSection {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 16px 40px;
  position: relative;
  background: linear-gradient(135deg, #f8f8f8 0%, #fff 100%);
  animation: warmCycle 18s ease-in-out infinite
}

@keyframes warmCycle {

  0%,
  100% {
    background: linear-gradient(135deg, #f8f8f8 0%, #fff 100%)
  }

  50% {
    background: linear-gradient(135deg, #fff5eb 0%, #fff 100%)
  }
}

.contactMainWrap .heroInner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start
}

.contactMainWrap .heroText h1 {
  font-size: 66px;
  line-height: 1.1;
  margin: 0 0 16px;
  font-weight: 700;
  color: #1a1a1a
}

.contactMainWrap .heroText p {
  font-size: 21px;
  line-height: 1.55;
  margin: 0 0 40px;
  color: #4a4a4a
}

.contactMainWrap .heroImage {
  width: 100%;
  height: 320px;
  background: linear-gradient(to right, #4B3C8D 0%, #FF8D0D 100%);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  box-shadow: -1px 6px 18px -2px #4b3c8d14
}

.contactMainWrap .heroImage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 70% 50%, #ff8d0d66, transparent);
  opacity: .6
}

.contactMainWrap .heroImage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, #00000080 100%)
}

.contactMainWrap .waveDivider {
  height: 60px;
  background: #FFF;
  position: relative;
  overflow: hidden
}

.contactMainWrap .waveDivider svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px
}

.contactMainWrap .detailsSection {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 16px;
  background: #f4f4f4
}

.contactMainWrap .detailsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px
}

.contactMainWrap .detailCard {
  background: #FFF;
  border-radius: 3px;
  padding: 40px;
  box-shadow: -1px 3px 6px -2px #4b3c8d0d;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s ease-in-out;
  opacity: 0;
  transform: rotate(-2deg) translateY(20px);
  animation: revealCard .5s cubic-bezier(0.16, 1, 0.3, 1) forwards
}

.contactMainWrap .detailCard:nth-child(1) {
  animation-delay: .1s
}

.contactMainWrap .detailCard:nth-child(2) {
  animation-delay: .3s
}

.contactMainWrap .detailCard:nth-child(3) {
  animation-delay: .5s
}

@keyframes revealCard {
  to {
    opacity: 1;
    transform: rotate(0) translateY(0)
  }
}

.contactMainWrap .detailCard:hover {
  transform: translateY(-4px);
  box-shadow: -1px 9px 52px -2px #4b3c8d24
}

.contactMainWrap .cardIcon {
  width: 48px;
  height: 48px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center
}

.contactMainWrap .cardIcon svg {
  width: 32px;
  height: 32px
}

.contactMainWrap .detailCard h3 {
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 8px;
  color: #1a1a1a;
  font-weight: 600;
  display: inline-block;
  position: relative
}

.contactMainWrap .detailCard h3::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 60%;
  height: 2px;
  background: #FF8D0D
}

.contactMainWrap .detailCard p {
  font-size: 21px;
  line-height: 1.55;
  margin: 16px 0 0;
  color: #4a4a4a
}

.contactMainWrap .detailCard a {
  color: #4B3C8D;
  text-decoration: none;
  transition: color .35s ease-in-out
}

.contactMainWrap .detailCard a:hover {
  color: #FF8D0D
}

.contactMainWrap .formSection {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 16px;
  background: #FFF
}

.contactMainWrap .formHeader {
  max-width: 800px;
  margin: 0 0 40px
}

.contactMainWrap .formHeader h2 {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 16px;
  font-weight: 700;
  color: #1a1a1a;
  background: linear-gradient(90deg, #FF8D0D 0%, #4B3C8D 100%);
  padding: 8px 16px;
  display: inline-block;
  color: #FFF
}

.contactMainWrap .formHeader p {
  font-size: 21px;
  line-height: 1.55;
  margin: 16px 0 0;
  color: #4a4a4a
}

.contactMainWrap .contactForm {
  max-width: 800px;
  background: #fafafa;
  padding: 40px;
  border-radius: 3px;
  box-shadow: -1px 3px 6px -2px #ff8d0d0d
}

.contactMainWrap .formRow {
  margin: 0 0 40px
}

.contactMainWrap .formLabel {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .5px
}

.contactMainWrap .formInput,
.contactMainWrap .formTextarea {
  width: 100%;
  padding: 16px;
  font-size: 21px;
  line-height: 1.55;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  background: #FFF;
  color: #1a1a1a;
  transition: border-color .4s ease-in-out, box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit
}

.contactMainWrap .formInput::placeholder,
.contactMainWrap .formTextarea::placeholder {
  color: #9a9a9a;
  font-weight: 300
}

.contactMainWrap .formInput:focus,
.contactMainWrap .formTextarea:focus {
  outline: none;
  border-color: #FF8D0D;
  box-shadow: inset 0 0 0 1px #FF8D0D, inset 0 2px 8px #ff8d0d1a
}

.contactMainWrap .formTextarea {
  resize: vertical;
  min-height: 140px
}

.contactMainWrap .prioritySelector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px
}

.contactMainWrap .priorityOption {
  position: relative
}

.contactMainWrap .priorityOption input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.contactMainWrap .priorityLabel {
  display: block;
  padding: 16px;
  text-align: center;
  font-size: 21px;
  line-height: 1.55;
  background: #FFF;
  border: 2px solid #e0e0e0;
  border-radius: 3px;
  cursor: pointer;
  transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
  color: #4a4a4a;
  font-weight: 500
}

.contactMainWrap .priorityOption input[type="radio"]:checked+.priorityLabel {
  background: linear-gradient(135deg, #FF8D0D 0%, #4B3C8D 100%);
  border-color: #FF8D0D;
  color: #FFF;
  transform: scale(1.05)
}

.contactMainWrap .priorityLabel:hover {
  border-color: #FF8D0D
}

.contactMainWrap .consentWrap {
  margin: 0 0 40px;
  padding: 16px;
  background: #f0f0f0;
  border-left: 4px solid #4B3C8D
}

.contactMainWrap .consentLabel {
  display: flex;
  align-items: start;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.55;
  color: #4a4a4a
}

.contactMainWrap .consentLabel input[type="checkbox"] {
  margin: 4px 0 0;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #4B3C8D
}

.contactMainWrap .consentLabel a {
  color: #4B3C8D;
  text-decoration: underline;
  transition: color .35s ease-in-out
}

.contactMainWrap .consentLabel a:hover {
  color: #FF8D0D
}

.contactMainWrap .submitBtn {
  background: transparent;
  color: #4B3C8D;
  border: 2px solid #4B3C8D;
  padding: 16px 40px;
  font-size: 21px;
  line-height: 1.55;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  transition: all .5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  font-family: inherit
}

.contactMainWrap .submitBtn::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(135deg, #4B3C8D 0%, #FF8D0D 100%);
  transition: transform .55s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(-100%) translateY(-100%);
  z-index: -1
}

.contactMainWrap .submitBtn:hover::before {
  transform: translateX(0) translateY(0)
}

.contactMainWrap .submitBtn:hover {
  color: #FFF;
  border-color: #FF8D0D
}

.contactMainWrap .featureStack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 40px 0 0
}

.contactMainWrap .featureItem {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #FFF;
  border-radius: 3px;
  box-shadow: -1px 3px 6px -2px #4b3c8d0d
}

.contactMainWrap .featureItem:nth-child(odd) {
  flex-direction: row
}

.contactMainWrap .featureItem:nth-child(even) {
  flex-direction: row-reverse
}

.contactMainWrap .featureIconBox {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF8D0D 0%, #4B3C8D 100%);
  border-radius: 40px
}

.contactMainWrap .featureIconBox svg {
  width: 24px;
  height: 24px
}

.contactMainWrap .featureText {
  flex: 1
}

.contactMainWrap .featureText h4 {
  font-size: 21px;
  line-height: 1.55;
  margin: 0 0 4px;
  color: #1a1a1a;
  font-weight: 600
}

.contactMainWrap .featureText p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  color: #6a6a6a
}

.contactMainWrap .dashedConnector {
  width: 2px;
  height: 40px;
  margin: 0 auto;
  background-image: repeating-linear-gradient(to bottom, #FF8D0D 0px, #FF8D0D 6px, transparent 6px, transparent 12px)
}

@media (min-width: 768px) {
  .contactMainWrap .heroInner {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
  }

  .contactMainWrap .detailsGrid {
    grid-template-columns: repeat(3, 1fr)
  }

  .contactMainWrap .formRow.twoColumn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
  }
}

@media (min-width: 1280px) {
  .contactMainWrap .heroSection {
    padding: 120px 16px 60px
  }

  .contactMainWrap .heroText h1 {
    font-size: 66px
  }

  .contactMainWrap .detailsSection {
    padding: 120px 16px
  }

  .contactMainWrap .formSection {
    padding: 120px 16px
  }
}

@media (max-width: 767px) {
  .contactMainWrap .heroText h1 {
    font-size: 38px
  }

  .contactMainWrap .prioritySelector {
    grid-template-columns: 1fr
  }
}

::selection {
  background: #ff8d0d1a
}

.aboutMain {
  background: #FFF;
  color: #1a1a1a;
  min-height: 100vh
}

.aboutMain .heroAbout {
  background: linear-gradient(135deg, #4B3C8D 0%, #6B5AAD 100%);
  padding: 80px 16px;
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid #FF8D0D
}

.aboutMain .heroAbout::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at 70% 30%, #ff8d0d26 0%, transparent 70%);
  pointer-events: none
}

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

.aboutMain .heroTitle {
  font-size: 66px;
  line-height: 1.1;
  color: #FFF;
  margin: 0 0 40px
}

.aboutMain .heroTitle .punctAccent {
  color: #FF8D0D
}

.aboutMain .heroImageWrap {
  margin: 40px 0 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: -1px 9px 52px -2px #4b3c8d24;
  position: relative
}

.aboutMain .heroImageWrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, #00000080 100%);
  pointer-events: none
}

.aboutMain .heroImageWrap img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.aboutMain .heroImageWrap:hover img {
  transform: scale(1.08)
}

.aboutMain .decorLine {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 180px;
  height: 2px;
  background: #FF8D0D
}

.aboutMain .storySection {
  padding: 80px 16px;
  background: #f8f8f8
}

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

.aboutMain .storyGrid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 40px;
  align-items: start
}

.aboutMain .storyImageCol {
  position: relative
}

.aboutMain .storyImageStack {
  position: relative
}

.aboutMain .storyImg1 {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 40px;
  box-shadow: -1px 6px 18px -2px #4b3c8d14;
  display: block;
  margin: 0 0 16px
}

.aboutMain .storyImg2 {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: -1px 3px 6px -2px #4b3c8d0d;
  display: block
}

.aboutMain .storyContent {
  background: #FFF;
  padding: 40px;
  border-radius: 3px;
  box-shadow: -1px 6px 18px -2px #4b3c8d14
}

.aboutMain .sectionHead {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 40px;
  background: linear-gradient(90deg, #FF8D0D 0%, #4B3C8D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  padding: 0 0 0 16px
}

.aboutMain .sectionHead::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: #FF8D0D
}

.aboutMain .storyPara {
  font-size: 21px;
  line-height: 1.55;
  margin: 0 0 16px;
  color: #2a2a2a
}

.aboutMain .storyPara:last-of-type {
  margin: 0
}

.aboutMain .valuesSection {
  padding: 80px 16px;
  background: #FFF;
  position: relative
}

.aboutMain .valuesSection::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background-image: radial-gradient(circle, #4b3c8d0f 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: .4;
  pointer-events: none
}

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

.aboutMain .valuesHead {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 40px;
  color: #1a1a1a
}

.aboutMain .valuesIntro {
  font-size: 21px;
  line-height: 1.55;
  color: #2a2a2a;
  margin: 0 0 40px;
  max-width: 880px
}

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

.aboutMain .valueCard {
  background: #f8f8f8;
  padding: 40px;
  border-radius: 3px;
  position: relative;
  transition: box-shadow .4s ease-in-out, transform .4s ease-in-out;
  box-shadow: -1px 3px 6px -2px #4b3c8d0d
}

.aboutMain .valueCard:hover {
  box-shadow: -1px 9px 52px -2px #ff8d0d24;
  transform: translateY(-4px)
}

.aboutMain .valueCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #FF8D0D 0%, #4B3C8D 100%);
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity .35s ease-in-out
}

.aboutMain .valueCard:hover::before {
  opacity: 1
}

.aboutMain .valueIcon {
  width: 56px;
  height: 56px;
  margin: 0 0 16px;
  border-radius: 40px;
  background: linear-gradient(135deg, #FF8D0D 0%, #4B3C8D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1)
}

.aboutMain .valueCard:hover .valueIcon {
  transform: rotate(360deg)
}

.aboutMain .valueIcon svg {
  width: 28px;
  height: 28px;
  fill: #FFF
}

.aboutMain .valueTitle {
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #1a1a1a
}

.aboutMain .valueText {
  font-size: 21px;
  line-height: 1.55;
  margin: 0;
  color: #2a2a2a
}

.aboutMain .teamSection {
  padding: 80px 16px;
  background: linear-gradient(135deg, #f8f8f8 0%, #fff 100%);
  border-top: 4px solid #FF8D0D
}

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

.aboutMain .teamHead {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #1a1a1a;
  text-align: center
}

.aboutMain .teamSubhead {
  font-size: 21px;
  line-height: 1.55;
  color: #2a2a2a;
  margin: 0 0 40px;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto
}

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

.aboutMain .teamMember {
  background: #FFF;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: -1px 6px 18px -2px #4b3c8d14;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative
}

.aboutMain .teamMember:hover {
  transform: translateY(-8px);
  box-shadow: -1px 9px 52px -2px #4b3c8d24
}

.aboutMain .teamImage {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(0.16, 1, 0.3, 1)
}

.aboutMain .teamMember:hover .teamImage {
  transform: scale(1.1)
}

.aboutMain .teamInfo {
  padding: 40px;
  background: linear-gradient(135deg, #4b3c8d08 0%, #ff8d0d08 100%)
}

.aboutMain .memberName {
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 8px;
  color: #1a1a1a
}

.aboutMain .memberRole {
  font-size: 21px;
  line-height: 1.55;
  margin: 0;
  color: #4B3C8D
}

@media (max-width: 1280px) {
  .aboutMain .storyGrid {
    grid-template-columns: 1fr;
    gap: 40px
  }

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

  .aboutMain .valuesList {
    grid-template-columns: 1fr
  }
}

@media (max-width: 768px) {
  .aboutMain .heroAbout {
    padding: 40px 16px
  }

  .aboutMain .heroTitle {
    font-size: 38px
  }

  .aboutMain .heroImageWrap img {
    height: 280px
  }

  .aboutMain .storySection,
  .aboutMain .valuesSection,
  .aboutMain .teamSection {
    padding: 40px 16px
  }

  .aboutMain .sectionHead,
  .aboutMain .valuesHead,
  .aboutMain .teamHead {
    font-size: 28px
  }

  .aboutMain .storyPara,
  .aboutMain .valuesIntro,
  .aboutMain .teamSubhead,
  .aboutMain .valueText,
  .aboutMain .memberRole {
    font-size: 13px;
    line-height: 1.55
  }

  .aboutMain .valueTitle,
  .aboutMain .memberName {
    font-size: 21px
  }

  .aboutMain .storyContent {
    padding: 16px
  }

  .aboutMain .valueCard {
    padding: 16px
  }

  .aboutMain .teamInfo {
    padding: 16px
  }

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

  .aboutMain .storyImg1 {
    height: 240px
  }

  .aboutMain .storyImg2 {
    height: 180px
  }

  .aboutMain .teamImage {
    height: 260px
  }
}

@media (max-width: 390px) {
  .aboutMain .heroTitle {
    font-size: 28px
  }

  .aboutMain .heroImageWrap img {
    height: 220px
  }

  .aboutMain .decorLine {
    width: 120px
  }
}

.webinarPage {
  background: #FFF;
  color: #1a1a1a;
  max-width: 1320px;
  margin: 0 auto
}

.webinarPage .heroSec {
  padding: 80px 40px 160px;
  background: linear-gradient(180deg, #f8f8f8 0%, #FFF 100%);
  position: relative;
  overflow: hidden
}

.webinarPage .heroSec::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #FF8D0D;
  border-radius: 50%;
  top: 140px;
  left: 120px;
  opacity: .6
}

.webinarPage .heroSec::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #4B3C8D;
  border-radius: 50%;
  top: 280px;
  left: 180px;
  opacity: .5
}

.webinarPage .heroInner {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.webinarPage .heroText h1 {
  font-size: 66px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #1a1a1a;
  font-weight: 700
}

.webinarPage .heroText .problemLine {
  font-size: 28px;
  line-height: 1.55;
  margin: 0 0 8px;
  color: #4B3C8D
}

.webinarPage .heroText .solutionLine {
  font-size: 21px;
  line-height: 1.55;
  margin: 0;
  color: #666
}

.webinarPage .heroMedia {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: -1px 6px 18px -2px #4b3c8d14
}

.webinarPage .heroMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.05);
  transition: transform .48s cubic-bezier(0.16, 1, 0.3, 1)
}

.webinarPage .heroMedia:hover img {
  transform: scale(1.04)
}

.webinarPage .sessionsBlock {
  padding: 80px 40px;
  background: #FFF
}

.webinarPage .sessionsBlock .blockHeader {
  margin: 0 0 40px
}

.webinarPage .sessionsBlock h2 {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #1a1a1a;
  display: inline-block;
  background: linear-gradient(90deg, #ff8d0d1f 0%, #ff8d0d2e 100%);
  padding: 8px 16px;
  border-radius: 3px
}

.webinarPage .sessionsBlock .blockIntro {
  font-size: 21px;
  line-height: 1.55;
  color: #555;
  max-width: 880px
}

.webinarPage .sessionsGrid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 40px
}

.webinarPage .sessionCard {
  background: #fafafa;
  padding: 40px;
  border-radius: 40px;
  box-shadow: -1px 3px 6px -2px #4b3c8d0d;
  transition: box-shadow .45s ease-in-out, transform .42s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative
}

.webinarPage .sessionCard:hover {
  box-shadow: -1px 9px 52px -2px #4b3c8d24;
  transform: translateY(-4px)
}

.webinarPage .sessionCard .dateBox {
  background: linear-gradient(135deg, #4B3C8D 0%, #6852b3 100%);
  color: #FFF;
  padding: 16px;
  border-radius: 3px;
  margin: 0 0 16px;
  text-align: center
}

.webinarPage .sessionCard .dayNum {
  font-size: 38px;
  line-height: 1.1;
  font-weight: 700;
  display: block
}

.webinarPage .sessionCard .monthYear {
  font-size: 13px;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .9
}

.webinarPage .sessionCard h3 {
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #1a1a1a
}

.webinarPage .sessionCard .sessionMeta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: #666
}

.webinarPage .sessionCard .metaItem {
  display: flex;
  align-items: center;
  gap: 8px
}

.webinarPage .sessionCard .metaIcon {
  width: 16px;
  height: 16px;
  fill: #FF8D0D
}

.webinarPage .sessionCard .sessionDesc {
  font-size: 21px;
  line-height: 1.55;
  color: #555;
  margin: 0 0 16px
}

.webinarPage .sessionCard .topicsList {
  list-style: none;
  padding: 0;
  margin: 0 0 16px
}

.webinarPage .sessionCard .topicsList li {
  font-size: 21px;
  line-height: 1.55;
  color: #333;
  padding: 8px 0;
  position: relative;
  padding-left: 28px
}

.webinarPage .sessionCard .topicsList li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #FF8D0D;
  border-radius: 50%
}

.webinarPage .sessionCard .statusBadge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 40px;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px
}

.webinarPage .sessionCard .statusBadge.upcoming {
  background: #ff8d0d26;
  color: #d97300
}

.webinarPage .sessionCard .statusBadge.available {
  background: #4bb95f26;
  color: #2d7a3e
}

.webinarPage .accessBlock {
  padding: 80px 40px;
  background: linear-gradient(0deg, #f8f8f8 0%, #FFF 50%, #f8f8f8 100%);
  position: relative
}

.webinarPage .accessBlock::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #4B3C8D;
  border-radius: 50%;
  top: 120px;
  right: 160px;
  opacity: .4
}

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

.webinarPage .accessLeft {
  flex: 1
}

.webinarPage .accessRight {
  flex: 1;
  position: relative
}

.webinarPage .accessLeft h2 {
  font-size: 38px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #1a1a1a
}

.webinarPage .accessLeft .accessIntro {
  font-size: 21px;
  line-height: 1.55;
  color: #555;
  margin: 0 0 40px
}

.webinarPage .accessSteps {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.webinarPage .stepItem {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: #FFF;
  border-radius: 3px;
  box-shadow: -1px 3px 6px -2px #ff8d0d0d;
  transition: border .4s ease-in-out;
  border: 1px solid transparent
}

.webinarPage .stepItem:hover {
  border: 1px dashed #FF8D0D
}

.webinarPage .stepNum {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  color: #FF8D0D;
  min-width: 40px
}

.webinarPage .stepContent h4 {
  font-size: 21px;
  line-height: 1.1;
  margin: 0 0 8px;
  color: #1a1a1a
}

.webinarPage .stepContent p {
  font-size: 21px;
  line-height: 1.55;
  margin: 0;
  color: #666
}

.webinarPage .accessRight .quoteWrap {
  position: relative;
  padding: 40px;
  background: #FFF;
  border-radius: 40px;
  box-shadow: -1px 6px 18px -2px #4b3c8d14
}

.webinarPage .accessRight .quoteMark {
  font-size: 120px;
  line-height: 1;
  color: #ff8d0d26;
  position: absolute;
  top: 8px;
  left: 16px;
  font-family: Georgia, serif
}

.webinarPage .accessRight .quoteText {
  font-size: 21px;
  line-height: 1.55;
  color: #333;
  margin: 0 0 16px;
  position: relative;
  z-index: 1
}

.webinarPage .accessRight .quoteAuthor {
  font-size: 13px;
  line-height: 1.55;
  color: #666;
  text-align: right
}

.webinarPage .divider {
  width: 2px;
  background: linear-gradient(180deg, #ff8d0d80 0%, #4b3c8d80 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%)
}

@media (max-width: 1280px) {
  .webinarPage .heroSec {
    padding: 80px 40px 120px
  }

  .webinarPage .heroText h1 {
    font-size: 56px
  }

  .webinarPage .sessionsGrid {
    grid-template-columns: 1fr
  }

  .webinarPage .accessInner {
    gap: 40px
  }
}

@media (max-width: 768px) {
  .webinarPage .heroSec {
    padding: 40px 16px 80px
  }

  .webinarPage .heroText h1 {
    font-size: 38px
  }

  .webinarPage .heroText .problemLine {
    font-size: 21px
  }

  .webinarPage .heroMedia {
    height: 280px
  }

  .webinarPage .sessionsBlock {
    padding: 40px 16px
  }

  .webinarPage .sessionsBlock h2 {
    font-size: 28px
  }

  .webinarPage .sessionCard {
    padding: 16px
  }

  .webinarPage .sessionCard h3 {
    font-size: 21px
  }

  .webinarPage .accessBlock {
    padding: 40px 16px
  }

  .webinarPage .accessInner {
    flex-direction: column;
    gap: 40px
  }

  .webinarPage .accessLeft h2 {
    font-size: 28px
  }

  .webinarPage .divider {
    display: none
  }
}

@media (max-width: 390px) {
  .webinarPage .heroText h1 {
    font-size: 28px
  }

  .webinarPage .heroMedia {
    height: 220px
  }

  .webinarPage .sessionsBlock h2 {
    font-size: 21px
  }

  .webinarPage .accessLeft h2 {
    font-size: 21px
  }
}

.successPage {
  background: linear-gradient(to bottom, #FFF 0%, #F8F7FC 100%);
  min-height: 100vh;
  padding: 80px 16px
}

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

.successPage .confirmationBox {
  background: #FFF;
  border-radius: 40px;
  padding: 80px 40px;
  text-align: center;
  box-shadow: -1px 9px 52px -2px #ff8d0d24;
  position: relative;
  overflow: hidden
}

.successPage .confirmationBox::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at 70% 40%, #ff8d0d14 0%, transparent 60%);
  pointer-events: none
}

.successPage .confirmationBox::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse at 70% 40%, #4b3c8d0f 0%, transparent 60%);
  pointer-events: none
}

.successPage .iconContainer {
  width: 120px;
  height: 120px;
  margin: 0 auto 40px;
  position: relative;
  animation: iconSettle .65s cubic-bezier(0.16, 1, 0.3, 1) forwards
}

@keyframes iconSettle {
  0% {
    transform: rotate(0deg) scale(0.8);
    opacity: 0
  }

  60% {
    transform: rotate(380deg) scale(1.1);
    opacity: 1
  }

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

.successPage .checkCircle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8D0D 0%, #FFB366 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -1px 6px 18px -2px #ff8d0d14
}

.successPage .checkCircle svg {
  width: 60px;
  height: 60px;
  stroke: #FFF;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.successPage .mainHeading {
  font-size: 66px;
  line-height: 1.1;
  color: #1A1A1A;
  margin: 0 0 16px;
  position: relative
}

.successPage .subText {
  font-size: 21px;
  line-height: 1.55;
  color: #4A4A4A;
  margin: 0 0 40px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto
}

.successPage .statusGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 40px 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto
}

.successPage .statusItem {
  background: linear-gradient(135deg, #F8F7FC 0%, #FFF 100%);
  border-radius: 3px;
  padding: 16px;
  border: 1px solid #4b3c8d1a;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s cubic-bezier(0.16, 1, 0.3, 1)
}

.successPage .statusItem:hover {
  transform: translateY(-4px);
  box-shadow: -1px 6px 18px -2px #4b3c8d14
}

.successPage .statusDot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 600;
  color: #FFF;
  background: linear-gradient(135deg, #4B3C8D 0%, #6B5AAD 100%)
}

.successPage .statusLabel {
  font-size: 13px;
  line-height: 1.55;
  color: #4A4A4A;
  margin: 0
}

.successPage .detailsPanel {
  background: #F8F7FC;
  border-radius: 3px;
  padding: 40px;
  margin: 40px 0 0;
  border: 1px solid #4b3c8d26;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  position: relative
}

.successPage .detailsPanel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #FF8D0D 0%, #4B3C8D 100%);
  border-radius: 3px 3px 0 0
}

.successPage .infoRow {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dotted #4b3c8d33
}

.successPage .infoRow:last-child {
  border-bottom: none
}

.successPage .infoLabel {
  font-size: 13px;
  line-height: 1.55;
  color: #6A6A6A;
  margin: 0;
  font-weight: 600
}

.successPage .infoValue {
  font-size: 13px;
  line-height: 1.55;
  color: #1A1A1A;
  margin: 0
}

.successPage .contactBlock {
  margin: 40px 0 0;
  padding: 40px;
  background: #FFF;
  border-radius: 3px;
  border: 1px solid #ff8d0d26;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: left
}

.successPage .contactHeading {
  font-size: 28px;
  line-height: 1.1;
  color: #1A1A1A;
  margin: 0 0 16px;
  background: linear-gradient(to right, #FF8D0D 0%, #ff8d0d00 100%);
  padding: 4px 16px 4px 0;
  display: inline-block
}

.successPage .contactText {
  font-size: 13px;
  line-height: 1.55;
  color: #4A4A4A;
  margin: 0 0 16px
}

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

.successPage .contactLink {
  font-size: 13px;
  line-height: 1.55;
  color: #4B3C8D;
  text-decoration: none;
  transition: color .4s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.successPage .contactLink::after {
  content: '→';
  color: #FF8D0D;
  transition: transform .4s ease-in-out
}

.successPage .contactLink:hover {
  color: #FF8D0D
}

.successPage .contactLink:hover::after {
  transform: translateX(4px)
}

.successPage .homeBtn {
  display: inline-block;
  margin: 40px auto 0;
  padding: 16px 40px;
  background: transparent;
  color: #4B3C8D;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid #4B3C8D;
  border-radius: 40px;
  transition: background .5s cubic-bezier(0.16, 1, 0.3, 1), color .5s cubic-bezier(0.16, 1, 0.3, 1), transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden
}

.successPage .homeBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FF8D0D 0%, #4B3C8D 100%);
  transition: left .5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1
}

.successPage .homeBtn:hover {
  color: #FFF;
  transform: translateY(-2px)
}

.successPage .homeBtn:hover::before {
  left: 0
}

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

  .successPage .confirmationBox {
    padding: 40px 16px
  }

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

  .successPage .subText {
    font-size: 13px
  }

  .successPage .statusGrid {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .successPage .detailsPanel {
    padding: 16px
  }

  .successPage .infoRow {
    grid-template-columns: 1fr;
    gap: 4px
  }

  .successPage .contactBlock {
    padding: 16px
  }

  .successPage .contactHeading {
    font-size: 21px
  }

  .successPage .homeBtn {
    padding: 16px;
    font-size: 13px
  }
}

@media (max-width: 390px) {
  .successPage .iconContainer {
    width: 90px;
    height: 90px
  }

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

  .successPage .checkCircle svg {
    width: 45px;
    height: 45px
  }

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