html {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: 'Alegreya', serif;
    font-size: 21px;
    line-height: 1.6;
    color: #0E013D;
    background: #F6F6F6
}

.top-bar {
    background: linear-gradient(135deg, #0E013D 0%, #21E5E4 100%);
    padding: 8px 0;
    position: relative;
    overflow: hidden
}

.top-bar::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle at center, #f6f6f626, transparent 70%);
    pointer-events: none
}

.top-announce {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    color: #F6F6F6;
    font-size: 14px;
    letter-spacing: .5px
}

.hd-shell {
    background: #fff;
    border-bottom: 3px solid #21E5E4;
    box-shadow: 0 4px 20px -2px #0e013d14;
    position: relative
}

.hd-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px
}

.brand-zone {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative
}

.brand-zone::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #21E5E4, transparent)
}

.logo-mount {
    background: #F6F6F6;
    padding: 8px;
    border-radius: 11px;
    box-shadow: 0 2px 5px -2px #0e013d12 0 4px 20px -2px #21e5e414;
    border: 2px solid #21E5E4;
    transition: transform .25s ease-out, box-shadow .25s ease-out
}

.logo-mount:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px -2px #0e013d14 0 9px 48px -2px #21e5e41c
}

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

.brand-txt {
    font-size: 21px;
    font-weight: 700;
    color: #0E013D;
    letter-spacing: -.3px
}

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

.nav-link {
    padding: 16px 24px;
    color: #0E013D;
    text-decoration: none;
    font-size: 21px;
    font-weight: 400;
    border-radius: 11px;
    transition: background .2s ease-out, color .2s ease-out, transform .15s ease-out;
    position: relative;
    letter-spacing: .2px
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: #21E5E4;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease-out
}

.nav-link:hover {
    background: linear-gradient(135deg, #21e5e41a, #0e013d0d);
    color: #0E013D;
    transform: translateY(-1px)
}

.nav-link:hover::before {
    transform: scaleX(1);
    transform-origin: left
}

.nav-link:focus {
    outline: 2px solid #21E5E4;
    outline-offset: 3px
}

.nav-link:active {
    transform: translateY(0) scale(0.98)
}

@media (max-width: 1024px) {
    .hd-inner {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .brand-zone::after {
        display: none
    }

    .nav-main {
        width: 100%;
        justify-content: flex-start
    }

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

    .nav-link::before {
        left: 16px;
        right: 16px
    }
}

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

    .top-announce {
        padding: 0 16px;
        font-size: 14px
    }

    .hd-inner {
        padding: 16px;
        gap: 16px
    }

    .brand-zone {
        gap: 8px
    }

    .logo-mount {
        padding: 8px
    }

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

    .brand-txt {
        font-size: 21px
    }

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

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

.ft-shell {
    background: linear-gradient(180deg, #fff 0%, #F6F6F6 100%);
    border-top: 3px solid #21E5E4;
    padding: 40px 24px 24px;
    position: relative
}

.ft-shell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #21E5E4 50%, transparent)
}

.ft-inner {
    max-width: 1170px;
    margin: 0 auto
}

.ft-upper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #21e5e433;
    flex-wrap: wrap
}

.ft-logo-hold {
    background: #fff;
    padding: 8px;
    border-radius: 11px;
    box-shadow: 0 2px 5px -2px #0e013d12;
    border: 2px solid #21E5E4
}

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

.ft-contact-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center
}

.ft-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0E013D;
    text-decoration: none;
    transition: color .2s ease-out
}

.ft-contact-item:hover {
    color: #21E5E4
}

.ft-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0
}

.ft-icon-circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2
}

.ft-icon-path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ft-lower {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.ft-nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center
}

.ft-nav-link {
    color: #0E013D;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    transition: background .2s ease-out, color .2s ease-out;
    letter-spacing: .3px
}

.ft-nav-link:hover {
    background: #21e5e41a;
    color: #0E013D
}

.ft-nav-link:focus {
    outline: 2px solid #21E5E4;
    outline-offset: 2px
}

.ft-copy {
    font-size: 14px;
    color: #0e013db3;
    text-align: center;
    letter-spacing: .2px
}

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

    .ft-upper {
        flex-direction: column;
        gap: 24px
    }

    .ft-contact-grid {
        flex-direction: column;
        gap: 16px;
        align-items: center
    }

    .ft-nav {
        flex-direction: column;
        gap: 8px;
        align-items: center
    }
}

.consent-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 9px 48px -2px #0e013d1c 0 4px 20px -2px #21e5e414;
    max-width: 400px;
    z-index: 4000;
    border: 2px solid #21E5E4;
    display: none;
    transform: translateX(450px);
    transition: transform .18s ease-out
}

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

.consent-icon-hold {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #21E5E4, #0E013D);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px
}

.consent-icon {
    width: 28px;
    height: 28px
}

.consent-icon-path {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.consent-txt {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    margin-bottom: 16px
}

.consent-actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.consent-btn {
    padding: 16px 24px;
    border: none;
    border-radius: 11px;
    font-family: 'Alegreya', serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease-out, transform .15s ease-out, box-shadow .2s ease-out;
    letter-spacing: .3px
}

.consent-btn.primary {
    background: linear-gradient(135deg, #21E5E4, #0E013D);
    color: #fff;
    box-shadow: 0 2px 5px -2px #0e013d12
}

.consent-btn.primary:hover {
    background: linear-gradient(135deg, #21E5E4 20%, #0E013D 100%);
    box-shadow: 0 4px 20px -2px #21e5e414;
    transform: translateY(-1px)
}

.consent-btn.primary:active {
    transform: translateY(0) scale(0.97)
}

.consent-btn.primary:focus {
    outline: 2px solid #21E5E4;
    outline-offset: 3px
}

.consent-link {
    color: #0E013D;
    text-decoration: none;
    font-size: 14px;
    padding: 16px;
    border-radius: 11px;
    transition: background .2s ease-out;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: 'Alegreya', serif;
    letter-spacing: .3px
}

.consent-link:hover {
    background: #21e5e41a
}

.consent-link:focus {
    outline: 2px solid #21E5E4;
    outline-offset: 2px
}

@media (max-width: 640px) {
    .consent-toast {
        top: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
        padding: 16px;
        transform: translateX(calc(100vw + 32px))
    }

    .consent-actions {
        flex-direction: column;
        width: 100%
    }

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

.pref-link {
    color: #0E013D;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    transition: background .2s ease-out;
    cursor: pointer;
    letter-spacing: .3px
}

.pref-link:hover {
    background: #21e5e41a
}

.pref-link:focus {
    outline: 2px solid #21E5E4;
    outline-offset: 2px
}

.content-doc {
    max-width: 1170px;
    margin: 0 auto;
    padding: 80px 24px;
    background: #FFF
}

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

.content-doc h1 {
    font-size: 70px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #0E013D;
    margin: 0 0 40px
}

@media (max-width: 1024px) {
    .content-doc h1 {
        font-size: 54px
    }
}

@media (max-width: 640px) {
    .content-doc h1 {
        font-size: 54px;
        margin: 0 0 24px
    }
}

.content-doc h2 {
    font-size: 54px;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #0E013D;
    margin: 80px 0 24px
}

@media (max-width: 768px) {
    .content-doc h2 {
        font-size: 21px;
        margin: 40px 0 16px
    }
}

.content-doc h3 {
    font-size: 21px;
    line-height: 1.6;
    letter-spacing: 0;
    color: #0E013D;
    margin: 40px 0 16px
}

@media (max-width: 768px) {
    .content-doc h3 {
        margin: 24px 0 16px
    }
}

.content-doc h4,
.content-doc h5,
.content-doc h6 {
    font-size: 21px;
    line-height: 1.6;
    letter-spacing: 0;
    color: #0E013D;
    margin: 24px 0 16px
}

.content-doc p {
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: .01em;
    color: #0E013D;
    margin: 0 0 24px
}

.content-doc strong,
.content-doc b {
    font-weight: 600;
    color: #0E013D
}

.content-doc ul,
.content-doc ol {
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: .01em;
    color: #0E013D;
    margin: 0 0 24px;
    padding: 0 0 0 24px
}

.content-doc ul {
    list-style-type: disc
}

.content-doc ol {
    list-style-type: decimal
}

.content-doc li {
    margin: 0 0 8px;
    padding: 0 0 0 8px
}

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

.content-doc ul ul,
.content-doc ol ul,
.content-doc ul ol,
.content-doc ol ol {
    margin: 8px 0 0
}

.content-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 40px;
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    background: #FFF;
    border-radius: 6px;
    box-shadow: 0 2px 5px -2px #0e013d12;
    overflow: hidden
}

@media (max-width: 768px) {
    .content-doc table {
        margin: 0 0 24px;
        display: block;
        overflow-x: auto
    }
}

.content-doc thead {
    background: #F6F6F6
}

.content-doc th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: #0E013D;
    border-bottom: 2px solid #21E5E4
}

@media (max-width: 640px) {
    .content-doc th {
        padding: 8px
    }
}

.content-doc td {
    padding: 16px;
    border-bottom: 1px solid #F6F6F6
}

@media (max-width: 640px) {
    .content-doc td {
        padding: 8px
    }
}

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

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

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

.content-doc hr {
    border: none;
    height: 1px;
    background: #F6F6F6;
    margin: 40px 0
}

@media (max-width: 768px) {
    .content-doc hr {
        margin: 24px 0
    }
}

.content-doc div {
    margin: 0 0 24px
}

.content-doc h1+p,
.content-doc h2+p,
.content-doc h3+p,
.content-doc h4+p,
.content-doc h5+p,
.content-doc h6+p {
    margin-top: 0
}

.content-doc h1+ul,
.content-doc h2+ul,
.content-doc h3+ul,
.content-doc h4+ul,
.content-doc h5+ul,
.content-doc h6+ul,
.content-doc h1+ol,
.content-doc h2+ol,
.content-doc h3+ol,
.content-doc h4+ol,
.content-doc h5+ol,
.content-doc h6+ol {
    margin-top: 0
}

.content-doc a {
    color: #21E5E4;
    text-decoration: none;
    transition: color .25s ease-out
}

.content-doc a:hover {
    color: #0E013D
}

.abt-pg {
    background: #F6F6F6;
    overflow-x: clip
}

.abt-pg .intro-banner {
    position: relative;
    max-width: 1170px;
    margin: 0 auto;
    padding: 40px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    min-height: 420px;
    overflow: hidden
}

.abt-pg .intro-banner::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -180px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, #21e5e426, transparent 70%);
    pointer-events: none;
    filter: blur(60px);
    z-index: 1
}

.abt-pg .intro-banner::after {
    content: '';
    position: absolute;
    bottom: -140px;
    right: -200px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, #0e013d1f, transparent 70%);
    pointer-events: none;
    filter: blur(80px);
    z-index: 1
}

.abt-pg .intro-txt {
    flex: 1 1 55%;
    z-index: 2;
    position: relative
}

.abt-pg .intro-txt h1 {
    font-size: 70px;
    line-height: 1.2;
    color: #0E013D;
    margin: 0 0 24px;
    letter-spacing: -.02em
}

.abt-pg .intro-txt .sub-line {
    font-size: 21px;
    line-height: 1.6;
    color: #0E013D;
    margin: 0 0 24px;
    opacity: .85
}

.abt-pg .intro-txt .action-lnk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 21px;
    color: #21E5E4;
    text-decoration: none;
    transition: transform .25s ease-out, color .35s ease-out
}

.abt-pg .intro-txt .action-lnk::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: currentColor;
    clip-path: polygon(0 50%, 70% 50%, 50% 30%, 100% 50%, 50% 70%, 70% 50%);
    transition: transform .3s ease-out
}

.abt-pg .intro-txt .action-lnk:hover {
    color: #0E013D;
    transform: translateX(4px)
}

.abt-pg .intro-txt .action-lnk:hover::after {
    transform: translateX(6px)
}

.abt-pg .intro-visual {
    flex: 1 1 45%;
    z-index: 2;
    position: relative
}

.abt-pg .intro-visual img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: 18px;
    filter: grayscale(1) contrast(1.15);
    box-shadow: 0 9px 48px -2px #0e013d1c;
    transition: filter .4s ease-out, box-shadow .35s ease-out
}

.abt-pg .intro-visual img:hover {
    filter: grayscale(0) contrast(1);
    box-shadow: 0 9px 48px -2px #21e5e41c
}

@media (max-width: 1024px) {
    .abt-pg .intro-banner {
        flex-direction: column;
        min-height: auto;
        padding: 40px 16px
    }

    .abt-pg .intro-txt h1 {
        font-size: 54px
    }

    .abt-pg .intro-visual img {
        height: 380px
    }
}

@media (max-width: 768px) {
    .abt-pg .intro-txt h1 {
        font-size: 54px
    }

    .abt-pg .intro-txt .sub-line {
        font-size: 21px
    }

    .abt-pg .intro-visual img {
        height: 320px
    }
}

.abt-pg .story-grid {
    max-width: 1170px;
    margin: 80px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.abt-pg .story-card {
    background: #FFF;
    border-radius: 11px;
    padding: 40px 24px;
    box-shadow: 0 4px 20px -2px #0e013d14;
    transition: transform .3s ease-out, box-shadow .35s ease-out;
    position: relative;
    overflow: hidden
}

.abt-pg .story-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #21E5E4, transparent);
    opacity: 0;
    transition: opacity .35s ease-out
}

.abt-pg .story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 9px 48px -2px #0e013d1c
}

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

.abt-pg .story-card h3 {
    font-size: 21px;
    line-height: 1.6;
    color: #0E013D;
    margin: 0 0 16px;
    font-weight: 300;
    letter-spacing: .03em
}

.abt-pg .story-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    margin: 0;
    opacity: .8
}

.abt-pg .story-card p+p {
    text-indent: 24px
}

.abt-pg .story-card .icon-shape {
    width: 56px;
    height: 56px;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #21E5E4, #21e5e44d);
    border-radius: 30px;
    transition: transform .4s ease-out, background .35s ease-out
}

.abt-pg .story-card:hover .icon-shape {
    transform: rotate(12deg) scale(1.08);
    background: linear-gradient(135deg, #0E013D, #0e013d80)
}

.abt-pg .story-card .icon-shape svg {
    width: 28px;
    height: 28px;
    fill: #FFF
}

@media (max-width: 1024px) {
    .abt-pg .story-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 640px) {
    .abt-pg .story-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 40px auto
    }

    .abt-pg .story-card {
        padding: 24px 16px
    }
}

.abt-pg .showcase-inverted {
    background: #0E013D;
    padding: 80px 24px;
    position: relative;
    overflow: hidden
}

.abt-pg .showcase-inverted::before {
    content: '';
    position: absolute;
    top: -5%;
    left: 0;
    right: 0;
    height: 120%;
    background: radial-gradient(ellipse at 30% 40%, #21e5e414, transparent 60%);
    pointer-events: none;
    animation: drift-glow 18s ease-in-out infinite
}

@keyframes drift-glow {

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

    50% {
        transform: translate(8%, -5%) scale(1.15)
    }
}

.abt-pg .showcase-wrap {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.abt-pg .showcase-wrap h2 {
    font-size: 54px;
    line-height: 1.2;
    color: #FFF;
    margin: 0 0 40px;
    text-align: center;
    letter-spacing: -.01em
}

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

.abt-pg .showcase-item {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.abt-pg .showcase-item .img-container {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 9px 48px -2px #21e5e41c
}

.abt-pg .showcase-item img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    transition: transform .45s ease-out
}

.abt-pg .showcase-item .img-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #21e5e440, transparent 60%);
    opacity: 1;
    transition: opacity .4s ease-out;
    pointer-events: none
}

.abt-pg .showcase-item .img-container:hover img {
    transform: scale(1.06)
}

.abt-pg .showcase-item .img-container:hover::after {
    opacity: 0
}

.abt-pg .showcase-item .txt-content {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.abt-pg .showcase-item h4 {
    font-size: 21px;
    line-height: 1.6;
    color: #21E5E4;
    margin: 0;
    font-weight: 300;
    letter-spacing: .02em
}

.abt-pg .showcase-item p {
    font-size: 14px;
    line-height: 1.9;
    color: #F6F6F6;
    margin: 0;
    opacity: .9
}

@media (max-width: 768px) {
    .abt-pg .showcase-inverted {
        padding: 40px 16px
    }

    .abt-pg .showcase-wrap h2 {
        font-size: 54px;
        margin: 0 0 24px
    }

    .abt-pg .showcase-items {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .abt-pg .showcase-item img {
        height: 280px
    }
}

.abt-pg .curve-divider {
    width: 100%;
    height: 80px;
    background: #0E013D;
    position: relative;
    overflow: hidden
}

.abt-pg .curve-divider svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.abt-pg .curve-divider path {
    fill: #F6F6F6
}

.abt-pg .metrics-stage {
    background: #F6F6F6;
    padding: 80px 24px;
    position: relative
}

.abt-pg .metrics-stage::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #0e013d14, transparent 70%);
    pointer-events: none;
    opacity: .6;
    border-radius: 46px;
    transform: rotate(25deg)
}

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

.abt-pg .metrics-container h2 {
    font-size: 54px;
    line-height: 1.2;
    color: #0E013D;
    margin: 0 0 40px;
    text-align: center;
    letter-spacing: -.01em
}

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

.abt-pg .metric-box {
    background: #FFF;
    border-radius: 11px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: 0 2px 5px -2px #0e013d12;
    transition: transform .35s ease-out, box-shadow .3s ease-out;
    position: relative;
    overflow: hidden
}

.abt-pg .metric-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #21E5E4, transparent);
    transform: translateX(-100%);
    transition: transform .45s ease-out
}

.abt-pg .metric-box:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 9px 48px -2px #0e013d1c
}

.abt-pg .metric-box:hover::before {
    transform: translateX(100%)
}

.abt-pg .metric-number {
    font-size: 54px;
    line-height: 1.2;
    color: #21E5E4;
    margin: 0 0 16px;
    font-weight: 700;
    display: block;
    animation: count-pulse 2s ease-out
}

@keyframes count-pulse {

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

    50% {
        transform: scale(1.05)
    }
}

.abt-pg .metric-label {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    margin: 0;
    opacity: .8;
    letter-spacing: .01em
}

@media (max-width: 1024px) {
    .abt-pg .metrics-row {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 640px) {
    .abt-pg .metrics-stage {
        padding: 40px 16px
    }

    .abt-pg .metrics-container h2 {
        font-size: 54px;
        margin: 0 0 24px
    }

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

    .abt-pg .metric-box {
        padding: 24px 16px
    }
}

.svc-page {
    background: #F6F6F6;
    overflow-x: clip
}

.svc-page .top-band {
    position: relative;
    background: linear-gradient(to bottom, #FFF 0%, #F6F6F6 100%);
    padding: 16px 24px;
    overflow: hidden
}

.svc-page .top-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, #21E5E4 1px, transparent 1px), radial-gradient(circle, #21E5E4 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: 0 0, 40px 40px;
    opacity: .06;
    pointer-events: none
}

.svc-page .top-band-container {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1
}

.svc-page .top-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px
}

.svc-page .top-band h1 {
    font-size: 54px;
    line-height: 1.2;
    color: #0E013D;
    letter-spacing: -.02em;
    margin: 0;
    filter: blur(8px);
    animation: clarify-heading .8s ease-out .2s forwards
}

@keyframes clarify-heading {
    to {
        filter: blur(0)
    }
}

.svc-page .top-band p {
    font-size: 21px;
    line-height: 1.6;
    color: #0E013D;
    margin: 0;
    opacity: .85
}

.svc-page .top-img-wrap {
    width: 100%;
    height: 180px;
    position: relative;
    border-radius: 11px;
    overflow: hidden
}

.svc-page .top-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter .35s ease-out
}

.svc-page .top-img-wrap:hover img {
    filter: grayscale(0%)
}

@media (min-width: 768px) {
    .svc-page .top-band {
        padding: 24px 40px
    }

    .svc-page .top-band-container {
        flex-direction: row;
        align-items: center
    }

    .svc-page .top-text {
        flex: 2
    }

    .svc-page .top-img-wrap {
        flex: 1;
        height: 220px
    }
}

@media (min-width: 1024px) {
    .svc-page .top-band {
        padding: 40px 80px
    }

    .svc-page .top-img-wrap {
        height: 260px
    }
}

.svc-page .offerings {
    background: #FFF;
    padding: 80px 24px;
    margin-left: 24px;
    position: relative
}

.svc-page .offerings::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at center, #21E5E4 0%, #21e5e400 70%);
    border-radius: 46px
}

.svc-page .offerings-container {
    max-width: 1170px;
    margin: 0 auto
}

.svc-page .offerings h2 {
    font-size: 54px;
    line-height: 1.2;
    color: #0E013D;
    letter-spacing: -.01em;
    margin: 0 0 40px;
    font-weight: 300;
    letter-spacing: .04em
}

.svc-page .offerings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px
}

.svc-page .offer-card {
    background: linear-gradient(135deg, #F6F6F6 0%, #FFF 100%);
    border-radius: 18px;
    padding: 40px;
    position: relative;
    box-shadow: 0 2px 5px -2px #0e013d12;
    transition: box-shadow .28s ease-out, transform .28s ease-out;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.svc-page .offer-card::before,
.svc-page .offer-card::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid #21E5E4;
    opacity: .4;
    transition: opacity .32s ease-out
}

.svc-page .offer-card::before {
    top: 16px;
    left: 16px;
    border-right: none;
    border-bottom: none;
    border-radius: 6px 0 0 0
}

.svc-page .offer-card::after {
    bottom: 16px;
    right: 16px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 6px 0
}

.svc-page .offer-card:hover {
    box-shadow: 0 9px 48px -2px #0e013d1c;
    transform: translateY(-4px)
}

.svc-page .offer-card:hover::before,
.svc-page .offer-card:hover::after {
    opacity: .8
}

.svc-page .offer-card h3 {
    font-size: 21px;
    line-height: 1.2;
    color: #0E013D;
    margin: 0;
    font-weight: 600
}

.svc-page .offer-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    margin: 0;
    opacity: .9
}

.svc-page .offer-img-wrap {
    width: 100%;
    height: 240px;
    border-radius: 11px;
    overflow: hidden;
    position: relative
}

.svc-page .offer-img-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0e013d4d;
    transition: background .38s ease-out;
    pointer-events: none
}

.svc-page .offer-img-wrap:hover::after {
    background: #0e013d00
}

.svc-page .offer-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .42s ease-out
}

.svc-page .offer-img-wrap:hover img {
    transform: scale(1.08)
}

@media (min-width: 768px) {
    .svc-page .offerings {
        margin-left: 40px
    }

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

@media (min-width: 1024px) {
    .svc-page .offerings {
        margin-left: 80px
    }
}

.svc-page .approach {
    background: linear-gradient(180deg, #0E013D 0%, #1a0a5c 100%);
    padding: 80px 24px;
    margin-right: 40px;
    position: relative;
    overflow: hidden
}

.svc-page .approach::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: #21E5E4;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}

.svc-page .approach::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./photo_files/old_special7-260212.jpg);
    background-size: cover;
    background-position: center;
    opacity: .08;
    pointer-events: none
}

.svc-page .approach-container {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px
}

.svc-page .approach-left {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.svc-page .approach h2 {
    font-size: 70px;
    line-height: 1.2;
    color: #FFF;
    margin: 0;
    font-weight: 300;
    letter-spacing: .06em;
    text-shadow: 0 4px 20px -2px #21e5e414;
    transition: text-shadow .36s ease-out
}

.svc-page .approach h2:hover {
    text-shadow: 0 4px 20px -2px #21e5e447 0 9px 48px -2px #21e5e42e
}

.svc-page .approach-text {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.svc-page .approach-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #FFF;
    margin: 0;
    opacity: .9;
    text-indent: 24px
}

.svc-page .approach-text p:first-child {
    text-indent: 0
}

.svc-page .approach-text .highlight {
    background: #21E5E4;
    color: #0E013D;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600
}

.svc-page .approach-right {
    display: flex;
    align-items: center;
    justify-content: center
}

.svc-page .approach-center {
    width: 100%;
    max-width: 400px
}

.svc-page .approach-img-wrap {
    width: 100%;
    height: 320px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 9px 48px -2px #21e5e41c;
    position: relative
}

.svc-page .approach-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease-out, filter .45s ease-out
}

.svc-page .approach-img-wrap:hover img {
    transform: scale(1.06);
    filter: brightness(1.1)
}

@media (min-width: 768px) {
    .svc-page .approach {
        margin-right: 80px
    }

    .svc-page .approach-container {
        grid-template-columns: 1fr 1fr;
        align-items: center
    }
}

@media (min-width: 1024px) {
    .svc-page .approach-container {
        grid-template-columns: 200px 1fr 200px
    }

    .svc-page .approach-left {
        grid-column: 2
    }

    .svc-page .approach-right {
        grid-column: 3
    }
}

.svc-page .metrics {
    background: #FFF;
    padding: 80px 24px;
    margin-left: 16px;
    position: relative
}

.svc-page .metrics::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 6px;
    background: linear-gradient(90deg, transparent 0%, #21E5E4 50%, transparent 100%)
}

.svc-page .metrics-container {
    max-width: 1170px;
    margin: 0 auto
}

.svc-page .metrics h2 {
    font-size: 54px;
    line-height: 1.2;
    color: #0E013D;
    margin: 0 0 40px;
    letter-spacing: -.01em
}

.svc-page .metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px
}

.svc-page .metric-card {
    background: linear-gradient(to bottom right, #F6F6F6 0%, #FFF 100%);
    border-radius: 11px;
    padding: 40px;
    box-shadow: 0 4px 20px -2px #0e013d14;
    transition: box-shadow .25s ease-out, transform .25s ease-out;
    position: relative;
    overflow: hidden
}

.svc-page .metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #21E5E4 0%, #21e5e400 100%);
    opacity: 0;
    transition: opacity .32s ease-out
}

.svc-page .metric-card:hover {
    box-shadow: 0 9px 48px -2px #0e013d1c;
    transform: translateX(8px)
}

.svc-page .metric-card:hover::before {
    opacity: 1
}

.svc-page .metric-value {
    font-size: 70px;
    line-height: 1.2;
    color: #21E5E4;
    margin: 0 0 16px;
    font-weight: 700;
    letter-spacing: -.02em;
    filter: blur(4px);
    animation: clarify-metric .6s ease-out .1s forwards
}

@keyframes clarify-metric {
    to {
        filter: blur(0)
    }
}

.svc-page .metric-card:nth-child(2) .metric-value {
    animation-delay: .2s
}

.svc-page .metric-card:nth-child(3) .metric-value {
    animation-delay: .3s
}

.svc-page .metric-card:nth-child(4) .metric-value {
    animation-delay: .4s
}

.svc-page .metric-label {
    font-size: 21px;
    line-height: 1.6;
    color: #0E013D;
    margin: 0;
    font-weight: 600
}

.svc-page .metric-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    margin: 16px 0 0;
    opacity: .8
}

@media (min-width: 640px) {
    .svc-page .metrics-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width: 1024px) {
    .svc-page .metrics {
        margin-left: 40px
    }

    .svc-page .metrics-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.svc-page ::selection {
    background: #0E013D;
    color: #FFF
}

.svc-page ::-moz-selection {
    background: #0E013D;
    color: #FFF
}

.prtl {
    background: #FFF;
    color: #0E013D;
    overflow-x: clip
}

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

.prtl .top-zone {
    position: relative;
    padding: 80px 16px;
    background: linear-gradient(to right, #21E5E4, #F6F6F6);
    overflow: hidden
}

.prtl .top-container {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px
}

.prtl .img-shape {
    flex: 0 0 auto;
    width: 280px;
    height: 280px;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    overflow: hidden
}

.prtl .img-shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.4);
    transition: filter .35s ease-out
}

.prtl .img-shape:hover img {
    filter: saturate(1)
}

.prtl .txt-zone {
    flex: 1;
    min-width: 0
}

.prtl .txt-zone h1 {
    font-size: 54px;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    color: #0E013D
}

.prtl .txt-zone .problem {
    font-size: 21px;
    line-height: 1.6;
    margin: 0 0 24px;
    color: #0E013D;
    opacity: .85
}

.prtl .txt-zone .solution {
    font-size: 21px;
    line-height: 1.6;
    margin: 0;
    color: #0E013D
}

.prtl .wave-divider {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 60px;
    overflow: hidden
}

.prtl .wave-divider svg {
    width: 100%;
    height: 100%;
    display: block
}

.prtl .outcome-zone {
    padding: 80px 16px;
    background: #FFF;
    position: relative
}

.prtl .outcome-container {
    max-width: 1170px;
    margin: 0 auto
}

.prtl .outcome-heading {
    font-size: 54px;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 40px;
    text-align: center;
    color: #0E013D
}

.prtl .outcome-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px
}

.prtl .outcome-card {
    background: #F6F6F6;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 4px 20px -2px #0e013d14;
    transition: box-shadow .28s ease-out, transform .28s ease-out;
    position: relative;
    animation: border-glow 1.2s ease-out forwards;
    border: 2px solid transparent
}

@keyframes border-glow {
    from {
        border-color: transparent
    }

    to {
        border-color: #21e5e44d
    }
}

.prtl .outcome-card:hover {
    box-shadow: 0 9px 48px -2px #0e013d1c;
    transform: translateY(-4px)
}

.prtl .outcome-card h3 {
    font-size: 21px;
    line-height: 1.6;
    margin: 0 0 16px;
    color: #0E013D;
    font-weight: 600
}

.prtl .outcome-card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: #0E013D;
    opacity: .8
}

.prtl .outcome-card p+p {
    text-indent: 24px
}

.prtl .outcome-dots {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    gap: 8px
}

.prtl .outcome-dots span {
    width: 8px;
    height: 8px;
    border-radius: 30px;
    background: #21E5E4;
    opacity: .3
}

.prtl .outcome-dots span:nth-child(2) {
    width: 12px;
    height: 12px;
    opacity: .5
}

.prtl .outcome-dots span:nth-child(3) {
    width: 16px;
    height: 16px;
    opacity: .7
}

.prtl .differ-zone {
    padding: 80px 16px;
    background: #F6F6F6;
    position: relative
}

.prtl .differ-container {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 80px;
    align-items: flex-start
}

.prtl .differ-left {
    flex: 1;
    min-width: 0
}

.prtl .differ-left h2 {
    font-size: 54px;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: #0E013D
}

.prtl .differ-text {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    opacity: .85
}

.prtl .differ-text p {
    margin: 0 0 16px
}

.prtl .differ-text p:last-child {
    margin: 0
}

.prtl .differ-text p+p {
    text-indent: 24px
}

.prtl .differ-right {
    flex: 0 0 auto;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.prtl .differ-img-wrap {
    width: 100%;
    height: 200px;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 2px 5px -2px #0e013d12;
    position: relative
}

.prtl .differ-img-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #21e5e433;
    transition: opacity .32s ease-out;
    pointer-events: none
}

.prtl .differ-img-wrap:hover::after {
    opacity: 0
}

.prtl .differ-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.prtl .differ-divider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 80px auto 0;
    max-width: 1170px
}

.prtl .differ-divider span {
    width: 80px;
    height: 2px;
    background: #21E5E4
}

.prtl .team-zone {
    padding: 80px 16px;
    background: linear-gradient(to right, #0E013D, #F6F6F6);
    position: relative
}

.prtl .team-container {
    max-width: 1170px;
    margin: 0 auto
}

.prtl .team-heading {
    font-size: 54px;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 40px;
    color: #0E013D
}

.prtl .team-layout {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start
}

.prtl .team-complex {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.prtl .team-row {
    display: flex;
    flex-direction: row;
    gap: 24px
}

.prtl .team-card {
    background: #FFF;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 4px 20px -2px #0e013d14;
    flex: 1;
    transition: box-shadow .25s ease-out
}

.prtl .team-card:hover {
    box-shadow: 0 9px 48px -2px #0e013d1c
}

.prtl .team-card.wide {
    flex: 2
}

.prtl .team-card h3 {
    font-size: 21px;
    line-height: 1.6;
    margin: 0 0 16px;
    color: #0E013D;
    font-weight: 600
}

.prtl .team-card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: #0E013D;
    opacity: .8
}

.prtl .team-card p+p {
    text-indent: 24px;
    margin-top: 16px
}

.prtl .team-minimal {
    flex: 0 0 auto;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.prtl .team-img-box {
    width: 100%;
    height: 180px;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 2px 5px -2px #0e013d12;
    position: relative
}

.prtl .team-img-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #21e5e426;
    transition: opacity .38s ease-out;
    pointer-events: none
}

.prtl .team-img-box:hover::after {
    opacity: 0
}

.prtl .team-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.prtl .team-metric {
    background: #FFF;
    padding: 24px;
    border-radius: 11px;
    box-shadow: 0 2px 5px -2px #0e013d12;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.prtl .metric-num {
    font-size: 70px;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -.03em
}

.prtl .metric-num.before {
    color: #0e013d4d
}

.prtl .metric-num.after {
    color: #21E5E4
}

@media (max-width: 1024px) {
    .prtl .top-container {
        flex-direction: column;
        gap: 40px
    }

    .prtl .img-shape {
        width: 240px;
        height: 240px
    }

    .prtl .txt-zone h1 {
        font-size: 54px;
        text-align: center
    }

    .prtl .txt-zone .problem,
    .prtl .txt-zone .solution {
        text-align: center
    }

    .prtl .outcome-heading {
        font-size: 54px
    }

    .prtl .differ-container {
        flex-direction: column;
        gap: 40px
    }

    .prtl .differ-right {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap
    }

    .prtl .differ-img-wrap {
        flex: 1 1 calc(50% - 12px);
        min-width: 280px
    }

    .prtl .team-layout {
        flex-direction: column
    }

    .prtl .team-minimal {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap
    }

    .prtl .team-img-box {
        flex: 1 1 calc(50% - 12px);
        min-width: 240px
    }

    .prtl .team-metric {
        flex: 1 1 calc(50% - 12px);
        min-width: 240px
    }
}

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

    .prtl .img-shape {
        width: 200px;
        height: 200px
    }

    .prtl .txt-zone h1 {
        font-size: 54px
    }

    .prtl .txt-zone .problem,
    .prtl .txt-zone .solution {
        font-size: 21px
    }

    .prtl .outcome-zone,
    .prtl .differ-zone,
    .prtl .team-zone {
        padding: 40px 16px
    }

    .prtl .outcome-heading,
    .prtl .differ-left h2,
    .prtl .team-heading {
        font-size: 54px
    }

    .prtl .team-row {
        flex-direction: column
    }

    .prtl .differ-right {
        flex-direction: column
    }

    .prtl .differ-img-wrap {
        width: 100%;
        height: 220px
    }

    .prtl .team-minimal {
        flex-direction: column
    }

    .prtl .team-img-box {
        width: 100%
    }

    .prtl .team-metric {
        width: 100%
    }
}

@media (max-width: 640px) {
    .prtl .txt-zone h1 {
        font-size: 54px
    }

    .prtl .txt-zone .problem,
    .prtl .txt-zone .solution {
        font-size: 21px
    }

    .prtl .outcome-heading,
    .prtl .differ-left h2,
    .prtl .team-heading {
        font-size: 54px
    }

    .prtl .outcome-card,
    .prtl .team-card {
        padding: 24px
    }

    .prtl .metric-num {
        font-size: 54px
    }
}

.prtl input::placeholder,
.prtl textarea::placeholder {
    font-style: italic;
    opacity: .55
}

.prtl ::selection {
    background: #0E013D;
    color: #FFF
}

.prtl button {
    cursor: pointer;
    transition: transform .18s ease-out, background .22s ease-out
}

.prtl button:active {
    transform: scale(0.97)
}

.prtl button:focus-visible {
    outline: 3px solid #21E5E4;
    outline-offset: 3px
}

.prtl a:focus-visible,
.prtl input:focus-visible,
.prtl textarea:focus-visible {
    outline: 3px solid #21E5E4;
    outline-offset: 2px
}

.contact-hub {
    background: #FFF;
    color: #0E013D;
    overflow-x: clip
}

.contact-hub * {
    box-sizing: border-box
}

.contact-hub .intro-panel {
    position: relative;
    padding: 80px 24px;
    background: linear-gradient(180deg, #21E5E4 0%, #21e5e400 100%);
    overflow: hidden
}

.contact-hub .intro-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./photo_files/PIC4946.jpg);
    background-size: cover;
    background-position: center;
    opacity: .12;
    transition: opacity .35s ease-out
}

.contact-hub .intro-panel:hover::before {
    opacity: .22
}

.contact-hub .intro-panel-stripe {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #0E013D
}

.contact-hub .intro-contain {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.contact-hub .intro-lead {
    font-size: 70px;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    font-weight: 300;
    color: #0E013D;
    animation: expand-reveal .5s ease-out forwards;
    transform-origin: top
}

@keyframes expand-reveal {
    from {
        max-height: 0;
        opacity: 0;
        transform: scaleY(0)
    }

    to {
        max-height: 500px;
        opacity: 1;
        transform: scaleY(1)
    }
}

.contact-hub .intro-text {
    font-size: 21px;
    line-height: 1.6;
    margin: 0 0 40px;
    max-width: 720px;
    color: #0E013D;
    animation: expand-reveal .5s ease-out .15s forwards;
    transform-origin: top;
    opacity: 0
}

.contact-hub .intro-link {
    display: inline-block;
    padding: 16px 40px;
    background: #0E013D;
    color: #FFF;
    text-decoration: none;
    border-radius: 11px;
    font-size: 21px;
    transition: transform .2s ease-out, box-shadow .3s ease-out;
    box-shadow: 0 4px 20px -2px #0e013d14;
    animation: expand-reveal .5s ease-out .3s forwards;
    transform-origin: top;
    opacity: 0
}

.contact-hub .intro-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 48px -2px #0e013d1c
}

.contact-hub .intro-link:active {
    transform: scale(0.97)
}

.contact-hub .intro-dots {
    position: absolute;
    bottom: 40px;
    right: 40px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center
}

.contact-hub .intro-dots span {
    display: block;
    border-radius: 46px;
    background: #0E013D;
    opacity: .15
}

.contact-hub .intro-dots span:nth-child(1) {
    width: 8px;
    height: 8px
}

.contact-hub .intro-dots span:nth-child(2) {
    width: 16px;
    height: 16px
}

.contact-hub .intro-dots span:nth-child(3) {
    width: 24px;
    height: 24px
}

@media (max-width: 768px) {
    .contact-hub .intro-lead {
        font-size: 54px
    }

    .contact-hub .intro-text {
        font-size: 21px
    }

    .contact-hub .intro-dots {
        bottom: 24px;
        right: 24px
    }
}

.contact-hub .reach-zone {
    padding: 80px 24px;
    background: #FFF;
    position: relative
}

.contact-hub .reach-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 0 0, transparent 10px, #F6F6F6 10px, #F6F6F6 12px, transparent 12px), radial-gradient(circle at 20px 0, transparent 10px, #F6F6F6 10px, #F6F6F6 12px, transparent 12px), radial-gradient(circle at 10px 17.32px, transparent 10px, #F6F6F6 10px, #F6F6F6 12px, transparent 12px), radial-gradient(circle at 30px 17.32px, transparent 10px, #F6F6F6 10px, #F6F6F6 12px, transparent 12px);
    background-size: 40px 34.64px;
    background-position: 0 0, 0 0, 0 0, 0 0;
    opacity: .03;
    pointer-events: none
}

.contact-hub .reach-contain {
    max-width: 1170px;
    margin: 0 auto;
    position: relative
}

.contact-hub .reach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start
}

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

.contact-hub .reach-info-block h2 {
    font-size: 54px;
    line-height: 1.2;
    margin: 0 0 40px;
    font-weight: 300;
    letter-spacing: .02em;
    color: #0E013D
}

.contact-hub .reach-flow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin: 0 0 40px
}

.contact-hub .reach-step {
    flex: 1;
    background: #F6F6F6;
    padding: 24px;
    border-radius: 11px;
    text-align: center;
    transition: background .25s ease-out, transform .2s ease-out;
    position: relative
}

.contact-hub .reach-step:hover {
    background: linear-gradient(135deg, #F6F6F6 0%, #21e5e414 100%);
    transform: translateY(-4px)
}

.contact-hub .reach-step-num {
    display: block;
    font-size: 54px;
    line-height: 1.2;
    font-weight: 300;
    color: #21E5E4;
    margin: 0 0 8px
}

.contact-hub .reach-step-label {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    margin: 0
}

.contact-hub .reach-arrow {
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 16px solid #21E5E4
}

@media (max-width: 768px) {
    .contact-hub .reach-flow {
        flex-direction: column
    }

    .contact-hub .reach-arrow {
        transform: rotate(90deg)
    }
}

.contact-hub .reach-details {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.contact-hub .reach-item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: start;
    padding: 24px;
    background: #FFF;
    border-radius: 18px;
    box-shadow: 0 4px 20px -2px #0e013d14;
    transition: box-shadow .28s ease-out, transform .22s ease-out
}

.contact-hub .reach-item:hover {
    box-shadow: 0 9px 48px -2px #0e013d1c;
    transform: translateX(8px)
}

.contact-hub .reach-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 11px;
    background: linear-gradient(135deg, #21E5E4 0%, #0E013D 100%);
    display: flex;
    align-items: center;
    justify-content: center
}

.contact-hub .reach-icon svg {
    width: 24px;
    height: 24px;
    fill: #FFF
}

.contact-hub .reach-data {
    flex: 1
}

.contact-hub .reach-data h3 {
    font-size: 21px;
    line-height: 1.2;
    margin: 0 0 8px;
    color: #0E013D
}

.contact-hub .reach-data p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: #0E013D
}

.contact-hub .reach-data a {
    color: #21E5E4;
    text-decoration: none;
    transition: color .18s ease-out
}

.contact-hub .reach-data a:hover {
    color: #0E013D
}

.contact-hub .reach-form-block {
    background: #F6F6F6;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 2px 5px -2px #0e013d12 inset
}

.contact-hub .reach-form-block h3 {
    font-size: 21px;
    line-height: 1.2;
    margin: 0 0 24px;
    color: #0E013D
}

.contact-hub .reach-form {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.contact-hub .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

@media (max-width: 640px) {
    .contact-hub .form-row {
        grid-template-columns: 1fr
    }
}

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

.contact-hub .form-field label {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    font-weight: 500
}

.contact-hub .form-field input,
.contact-hub .form-field select {
    padding: 16px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #FFF;
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    transition: border-color .2s ease-out, box-shadow .25s ease-out;
    outline: none;
    appearance: none
}

.contact-hub .form-field input::placeholder {
    font-style: italic;
    opacity: .5
}

.contact-hub .form-field input:focus,
.contact-hub .form-field select:focus {
    border-color: #21E5E4;
    box-shadow: 0 4px 20px -2px #21e5e414
}

.contact-hub .form-field select {
    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='%230E013D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
    cursor: pointer
}

.contact-hub .form-privacy {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: start
}

.contact-hub .form-privacy input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #21E5E4
}

.contact-hub .form-privacy label {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    cursor: pointer
}

.contact-hub .form-privacy a {
    color: #21E5E4;
    text-decoration: none;
    transition: color .18s ease-out
}

.contact-hub .form-privacy a:hover {
    color: #0E013D
}

.contact-hub .form-submit {
    padding: 16px 40px;
    background: #0E013D;
    color: #FFF;
    border: none;
    border-radius: 11px;
    font-size: 21px;
    cursor: pointer;
    transition: transform .2s ease-out, box-shadow .3s ease-out, background .25s ease-out;
    box-shadow: 0 4px 20px -2px #0e013d14
}

.contact-hub .form-submit:hover {
    background: linear-gradient(135deg, #0E013D 0%, #21E5E4 100%);
    transform: translateY(-2px);
    box-shadow: 0 9px 48px -2px #0e013d1c
}

.contact-hub .form-submit:active {
    transform: scale(0.97)
}

.contact-hub .metrics-panel {
    padding: 80px 24px;
    background: #0E013D;
    position: relative;
    overflow: hidden
}

.contact-hub .metrics-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #21E5E4
}

.contact-hub .metrics-panel::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #F6F6F6
}

.contact-hub .metrics-contain {
    max-width: 1170px;
    margin: 0 auto;
    position: relative
}

.contact-hub .metrics-contain h2 {
    font-size: 54px;
    line-height: 1.2;
    margin: 0 0 40px;
    font-weight: 300;
    letter-spacing: .02em;
    color: #FFF;
    text-align: center
}

.contact-hub .metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 0 0 40px
}

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

.contact-hub .metric-card {
    background: #f6f6f60d;
    padding: 40px;
    border-radius: 18px;
    text-align: center;
    border: 2px solid #21e5e426;
    transition: border-color .32s ease-out, transform .24s ease-out, background .35s ease-out;
    animation: wave-appear .5s ease-out forwards;
    opacity: 0
}

.contact-hub .metric-card:nth-child(1) {
    animation-delay: 0s
}

.contact-hub .metric-card:nth-child(2) {
    animation-delay: .15s
}

.contact-hub .metric-card:nth-child(3) {
    animation-delay: .3s
}

@keyframes wave-appear {
    from {
        opacity: 0;
        transform: translateY(40px)
    }

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

.contact-hub .metric-card:hover {
    border-color: #21E5E4;
    transform: translateY(-8px);
    background: #21e5e414
}

.contact-hub .metric-num {
    font-size: 70px;
    line-height: 1.2;
    font-weight: 300;
    color: #21E5E4;
    margin: 0 0 16px;
    display: block
}

.contact-hub .metric-label {
    font-size: 21px;
    line-height: 1.6;
    color: #F6F6F6;
    margin: 0 0 16px;
    display: block
}

.contact-hub .metric-story {
    font-size: 14px;
    line-height: 1.9;
    color: #f6f6f6b3;
    margin: 0;
    text-align: left
}

.contact-hub .metric-story:first-line {
    text-indent: 24px
}

.success-page {
    background: linear-gradient(168deg, #F6F6F6 0%, #fff 100%);
    padding: 80px 16px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center
}

.success-page .wrap {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto
}

.success-page .confirm-box {
    background: #fff;
    border-radius: 30px;
    padding: 80px 40px;
    box-shadow: 0 4px 20px -2px #0e013d14;
    text-align: center;
    max-width: 720px;
    margin: 0 auto
}

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

.success-page .check-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at bottom left, #21E5E4, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn .45s ease-out
}

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

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

.success-page .check-mark {
    width: 52px;
    height: 52px;
    position: relative
}

.success-page .check-mark svg {
    width: 100%;
    height: 100%;
    stroke: #0E013D;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round
}

.success-page .check-mark path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawCheck .35s ease-out .2s forwards
}

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

.success-page .title-main {
    font-size: 54px;
    line-height: 1.2;
    color: #0E013D;
    margin: 0 0 24px;
    letter-spacing: -.02em
}

.success-page .msg-text {
    font-size: 21px;
    line-height: 1.6;
    color: #0E013D;
    margin: 0 0 40px;
    opacity: .85
}

.success-page .info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 40px;
    text-align: left
}

.success-page .info-item {
    background: #F6F6F6;
    padding: 24px;
    border-radius: 11px;
    transition: background .25s ease-out
}

.success-page .info-item:hover {
    background: linear-gradient(135deg, #F6F6F6 0%, #21e5e414 100%)
}

.success-page .info-label {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    opacity: .6;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.success-page .info-value {
    font-size: 21px;
    line-height: 1.2;
    color: #0E013D;
    margin: 0
}

.success-page .action-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap
}

.success-page .btn-home {
    background: #0E013D;
    color: #fff;
    font-size: 21px;
    line-height: 1.2;
    padding: 16px 40px;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform .18s ease-out, box-shadow .18s ease-out;
    box-shadow: 0 2px 5px -2px #0e013d12
}

.success-page .btn-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 48px -2px #0e013d1c
}

.success-page .btn-home:active {
    transform: scale(0.97)
}

.success-page .btn-contact {
    background: transparent;
    color: #0E013D;
    font-size: 21px;
    line-height: 1.2;
    padding: 16px 40px;
    border: 2px solid #0E013D;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .22s ease-out, color .22s ease-out
}

.success-page .btn-contact:hover {
    background: #0E013D;
    color: #fff
}

.success-page .btn-contact:active {
    transform: scale(0.97)
}

.success-page .footer-note {
    font-size: 14px;
    line-height: 1.6;
    color: #0E013D;
    opacity: .6;
    margin: 40px 0 0
}

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

@media (min-width: 768px) {
    .success-page .confirm-box {
        padding: 80px
    }
}