@import "https://cdn.jsdelivr.net/npm/@fontsource/roboto-slab@latest/300.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/roboto-slab@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/roboto-slab@latest/700.css";

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

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

body {
    margin: 0;
    scrollbar-gutter: stable;
    min-height: 100vh;
    font-family: 'Roboto Slab', Georgia, serif
}

:focus-visible {
    outline: 2px solid #5677E8;
    outline-offset: 4px;
    border-radius: 2px
}

.sp-hd {
    background: #FBFBFB;
    border-bottom: 1px solid #5677e821;
    box-shadow: 0 1px 5px 0 #5677e812;
    position: relative;
    z-index: 100
}

.sp-hd-plate {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: stretch;
    min-height: 96px;
    gap: 28px
}

.sp-brand-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding: 14px 0
}

.sp-logo-pod {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border: 1px solid #5677e838;
    background: #fff;
    box-shadow: 0 1px 5px 0 #5677e812;
    flex-shrink: 0
}

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

.sp-brand-label {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sp-brand-label .name {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    color: #1a2340;
    letter-spacing: 0;
    text-decoration: none;
    display: block
}

.sp-brand-label .name:hover {
    color: #5677E8;
    transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #5677e812;
    border: 1px solid #5677e82e;
    border-radius: 2px;
    padding: 2px 6px;
    font-size: 15px;
    font-weight: 400;
    color: #5677E8;
    line-height: 1.75;
    white-space: nowrap
}

.sp-badge .mi {
    font-size: 15px;
    color: #D9B007
}

.sp-nav-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 0
}

.sp-nav-deck {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.sp-nav-deck a {
    font-size: 15px;
    font-weight: 400;
    color: #2a3350;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 2px;
    line-height: 1.75;
    display: inline-block;
    transition: color .5s ease, background .5s ease;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center
}

.sp-nav-deck a:hover {
    color: #5677E8;
    background: #5677e812
}

.sp-nav-deck a.active {
    color: #5677E8;
    font-weight: 700
}

.sp-nav-deck .sp-nav-cta {
    background: #5677E8;
    color: #fff;
    border-radius: 2px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 15px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), clip-path .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
    overflow: hidden
}

.sp-nav-deck .sp-nav-cta:hover {
    background: #3d5fd4;
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.sp-hd-accent {
    height: 3px;
    background: linear-gradient(90deg, #5677E8 0%, #D9B007 60%, #FBFBFB 100%)
}

.sp-ft {
    background: #1a2340;
    color: #c8cfe8;
    padding: 56px 0 0
}

.sp-ft-plate {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 28px
}

.sp-ft-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 56px
}

.sp-ft-col {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.sp-ft-col .col-head {
    font-size: 15px;
    font-weight: 700;
    color: #FBFBFB;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0;
    border-bottom: 1px solid #5677e840;
    padding-bottom: 14px;
    margin-bottom: 6px
}

.sp-ft-col .ft-lk {
    font-size: 15px;
    color: #a8b4d4;
    text-decoration: none;
    line-height: 1.75;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .55s ease
}

.sp-ft-col .ft-lk:hover {
    color: #D9B007
}

.sp-ft-col .ft-lk i {
    font-size: 15px;
    color: #5677E8;
    flex-shrink: 0
}

.sp-ft-contact {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.sp-ft-contact a {
    font-size: 15px;
    color: #a8b4d4;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.75;
    transition: color .55s ease
}

.sp-ft-contact a:hover {
    color: #D9B007
}

.sp-ft-contact a i {
    color: #5677E8;
    font-size: 15px;
    flex-shrink: 0
}

.sp-ft-about {
    font-size: 15px;
    color: #a8b4d4;
    line-height: 1.75
}

.sp-ft-bottom {
    border-top: 1px solid #5677e82e;
    padding: 28px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px
}

.sp-ft-logo-pod {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 1px solid #5677e84d;
    background: #ffffff0f;
    box-shadow: 0 1px 5px 0 #5677e812
}

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

.sp-ft-copy {
    font-size: 15px;
    color: #6a7898;
    line-height: 1.75;
    text-align: center
}

.sp-ft-copy a {
    color: #a8b4d4;
    text-decoration: none;
    transition: color .5s ease
}

.sp-ft-copy a:hover {
    color: #D9B007
}

.ck-bar {
    position: fixed;
    top: 28px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 560px;
    max-width: calc(100vw - 56px);
    background: #fff;
    border: 1px solid #5677e82e;
    border-radius: 6px;
    box-shadow: 0 8px 36px 0 #5677e81a;
    z-index: 2000;
    padding: 28px;
    display: none
}

.ck-bar .ck-head {
    font-size: 17px;
    font-weight: 700;
    color: #1a2340;
    line-height: 1.1;
    margin-bottom: 14px
}

.ck-bar .ck-desc {
    font-size: 15px;
    color: #2a3350;
    line-height: 1.75;
    margin-bottom: 28px
}

.ck-btns {
    display: flex;
    gap: 14px
}

.ck-btns button {
    flex: 1;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    padding: 14px;
    border-radius: 2px;
    border: 2px solid #5677E8;
    cursor: pointer;
    min-height: 44px;
    transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), clip-path .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
    overflow: hidden
}

.ck-btns .ck-ok {
    background: #5677E8;
    color: #fff
}

.ck-btns .ck-ok:hover {
    background: #3d5fd4;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%)
}

.ck-btns .ck-no {
    background: transparent;
    color: #5677E8
}

.ck-btns .ck-no:hover {
    background: #5677e812;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%)
}

.ck-btns .ck-ok:focus-visible,
.ck-btns .ck-no:focus-visible {
    outline: 2px solid #D9B007;
    outline-offset: 3px
}

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

@media (max-width: 600px) {
    .sp-hd-plate {
        flex-wrap: wrap;
        min-height: auto;
        padding: 14px;
        gap: 14px
    }

    .sp-brand-cell {
        padding: 6px 0
    }

    .sp-nav-cell {
        padding: 6px 0;
        width: 100%;
        justify-content: flex-start
    }

    .sp-nav-deck {
        justify-content: flex-start
    }

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

    .sp-ft-plate {
        padding: 0 14px
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .sp-hd-plate {
        padding: 0 14px;
        gap: 14px
    }

    .sp-brand-label .name {
        font-size: 17px
    }
}

.policy-details {
    max-width: 1366px;
    margin: 0 auto;
    padding: 56px 28px;
    color: #2a2a35
}

.policy-details h1 {
    font-size: clamp(37px, 5vw, 51px);
    line-height: 1.1;
    margin-bottom: 28px;
    margin-top: 0;
    color: #1b1b2a
}

.policy-details h2 {
    font-size: clamp(27px, 3.5vw, 37px);
    line-height: 1.1;
    margin-top: 56px;
    margin-bottom: 14px;
    color: #1b1b2a
}

.policy-details h3 {
    font-size: clamp(21px, 2.5vw, 27px);
    line-height: 1.1;
    margin-top: 28px;
    margin-bottom: 14px;
    color: #1b1b2a
}

.policy-details h4 {
    font-size: 21px;
    line-height: 1.75;
    margin-top: 28px;
    margin-bottom: 6px;
    color: #1b1b2a
}

.policy-details h5 {
    font-size: 17px;
    line-height: 1.75;
    margin-top: 14px;
    margin-bottom: 6px;
    color: #1b1b2a
}

.policy-details h6 {
    font-size: 15px;
    line-height: 1.75;
    margin-top: 14px;
    margin-bottom: 6px;
    color: #5677E8;
    text-transform: uppercase;
    letter-spacing: .06em
}

.policy-details p {
    font-size: 17px;
    line-height: 1.75;
    margin-top: 0;
    margin-bottom: 14px;
    color: #2a2a35
}

.policy-details ul,
.policy-details ol {
    font-size: 17px;
    line-height: 1.75;
    margin-top: 0;
    margin-bottom: 14px;
    padding-left: 28px;
    color: #2a2a35
}

.policy-details li {
    margin-bottom: 6px
}

.policy-details li:last-child {
    margin-bottom: 0
}

.policy-details ul li {
    list-style-type: disc
}

.policy-details ol li {
    list-style-type: decimal
}

.policy-details ul ul,
.policy-details ol ol,
.policy-details ul ol,
.policy-details ol ul {
    margin-top: 6px;
    margin-bottom: 6px
}

.policy-details strong,
.policy-details b {
    font-weight: 700;
    color: #1b1b2a
}

.policy-details em,
.policy-details i {
    font-style: italic;
    color: #2a2a35
}

.policy-details table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.75;
    margin-top: 28px;
    margin-bottom: 28px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 5px 0 #5677e812
}

.policy-details thead {
    background-color: #5677E8
}

.policy-details thead th {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    text-align: left
}

.policy-details tbody tr {
    border-bottom: 1px solid #5677e81a;
    transition: background-color .5s ease
}

.policy-details tbody tr:last-child {
    border-bottom: none
}

.policy-details tbody tr:nth-child(even) {
    background-color: #FBFBFB
}

.policy-details tbody tr:hover {
    background-color: #5677e80a
}

.policy-details td {
    padding: 14px 28px;
    font-size: 15px;
    line-height: 1.75;
    color: #2a2a35;
    vertical-align: top
}

.policy-details th {
    padding: 14px 28px;
    vertical-align: top
}

.policy-details div {
    font-size: 17px;
    line-height: 1.75
}

@media (max-width: 900px) {
    .policy-details {
        padding: 56px 28px
    }

    .policy-details table {
        display: block;
        overflow-x: auto
    }

    .policy-details thead th,
    .policy-details td {
        padding: 14px
    }
}

@media (max-width: 600px) {
    .policy-details {
        padding: 28px 14px
    }

    .policy-details h2 {
        margin-top: 28px
    }

    .policy-details ul,
    .policy-details ol {
        padding-left: 14px
    }
}

.bd-pg {
    max-width: 1366px;
    margin: 0 auto;
    overflow-x: clip
}

.bd-pg .fade-row {
    opacity: 0;
    transform: translateY(28px);
    animation: rowUp .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.bd-pg .fade-row.d1 {
    animation-delay: .1s
}

.bd-pg .fade-row.d2 {
    animation-delay: .25s
}

.bd-pg .fade-row.d3 {
    animation-delay: .4s
}

.bd-pg .fade-row.d4 {
    animation-delay: .55s
}

.bd-pg .fade-row.d5 {
    animation-delay: .7s
}

.bd-pg .fade-row.d6 {
    animation-delay: .85s
}

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

.bd-pg .divider-gem {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 0
}

.bd-pg .divider-gem .line {
    height: 1px;
    width: 80px;
    background: #5677E8;
    opacity: .22
}

.bd-pg .divider-gem .diamond {
    width: 8px;
    height: 8px;
    background: #5677E8;
    transform: rotate(45deg);
    border-radius: 2px;
    opacity: .5
}

.bd-pg .tb {
    position: relative;
    padding: 56px 56px 96px;
    background: linear-gradient(97deg, transparent 0%, #5677e81a 100%);
    border-bottom: 2px solid #5677e81f
}

.bd-pg .tb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, #5677E8 60%, #D9B007 100%);
    border-radius: 2px
}

.bd-pg .tb-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px
}

.bd-pg .tb-tag {
    display: inline-block;
    background: #5677E8;
    color: #FBFBFB;
    font-size: 15px;
    line-height: 1.1;
    padding: 6px 14px;
    border-radius: 2px;
    letter-spacing: .04em;
    text-transform: uppercase
}

.bd-pg .tb-date {
    font-size: 15px;
    line-height: 1.1;
    color: #5677E8;
    opacity: .7
}

.bd-pg .tb-like {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #D9B007;
    margin-left: auto
}

.bd-pg .tb-like i {
    font-size: 15px
}

.bd-pg .tb-title {
    font-size: clamp(37px, 5vw, 68px);
    line-height: 1.1;
    color: #1e2a52;
    max-width: 820px;
    margin-bottom: 28px;
    background: linear-gradient(97deg, #5677E8 0%, #D9B007 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.bd-pg .tb-img-wrap {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    max-width: 860px;
    box-shadow: 0 8px 36px 0 #5677e81a
}

.bd-pg .tb-img-wrap img {
    width: 100%;
    aspect-ratio: 16/7;
    object-fit: cover;
    display: block;
    opacity: .88;
    border-radius: 6px;
    transition: opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.bd-pg .tb-img-wrap img:hover {
    opacity: 1
}

.bd-pg .tb-img-diamond {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    background: #D9B007;
    transform: rotate(45deg);
    border-radius: 2px;
    opacity: .85
}

.bd-pg .art {
    padding: 96px 56px 56px;
    background: #FBFBFB
}

.bd-pg .art-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 56px;
    max-width: 1100px;
    margin: 0 auto
}

.bd-pg .art-body {
    max-width: 680px
}

.bd-pg .art-body p {
    font-size: 17px;
    line-height: 1.75;
    color: #2b2e3b;
    margin-bottom: 28px
}

.bd-pg .art-body h2 {
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.1;
    color: #1e2a52;
    margin-bottom: 14px;
    margin-top: 56px;
    background: linear-gradient(97deg, #5677E8 0%, #D9B007 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.bd-pg .art-body h3 {
    font-size: clamp(21px, 2.5vw, 27px);
    line-height: 1.1;
    color: #2b2e3b;
    margin-bottom: 14px;
    margin-top: 28px
}

.bd-pg .art-body strong {
    color: #1e2a52
}

.bd-pg .art-body del {
    color: #8a8fa8;
    text-decoration: line-through
}

.bd-pg .art-body ul {
    padding-left: 28px;
    margin-bottom: 28px
}

.bd-pg .art-body ul li {
    font-size: 17px;
    line-height: 1.75;
    color: #2b2e3b;
    margin-bottom: 6px;
    position: relative
}

.bd-pg .art-body ul li::marker {
    color: #5677E8
}

.bd-pg .art-body blockquote {
    margin: 28px 0;
    padding: 28px;
    background: linear-gradient(97deg, #5677e80f 0%, transparent 100%);
    border-radius: 6px;
    border-top: 2px solid #5677E8
}

.bd-pg .art-body blockquote p {
    font-size: 21px;
    line-height: 1.75;
    color: #1e2a52;
    margin-bottom: 0;
    font-style: italic
}

.bd-pg .art-body details {
    margin-bottom: 14px;
    border: 1px solid #5677e82e;
    border-radius: 6px;
    overflow: hidden
}

.bd-pg .art-body summary {
    font-size: 17px;
    line-height: 1.75;
    color: #5677E8;
    padding: 14px 28px;
    cursor: pointer;
    background: #5677e80a;
    transition: background .5s ease
}

.bd-pg .art-body summary:hover {
    background: #5677e817
}

.bd-pg .art-body details[open] summary {
    border-bottom: 1px solid #5677e81f
}

.bd-pg .art-body details p {
    padding: 14px 28px;
    margin-bottom: 0
}

.bd-pg .art-side {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.bd-pg .side-legend {
    background: #fff;
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 5px 25px 0 #5677e814
}

.bd-pg .side-legend-ttl {
    font-size: 15px;
    line-height: 1.1;
    color: #8a8fa8;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px
}

.bd-pg .legend-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px
}

.bd-pg .legend-item:last-child {
    margin-bottom: 0
}

.bd-pg .legend-ico {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5677e814;
    border-radius: 6px
}

.bd-pg .legend-ico i {
    font-size: 17px;
    color: #5677E8
}

.bd-pg .legend-ico .dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 20px;
    border: 2px solid #fff
}

.bd-pg .legend-ico .dot.yellow {
    background: #D9B007
}

.bd-pg .legend-ico .dot.blue {
    background: #5677E8
}

.bd-pg .legend-ico .dot.soft {
    background: #a8b8f0
}

.bd-pg .legend-txt {
    font-size: 15px;
    line-height: 1.75;
    color: #2b2e3b
}

.bd-pg .legend-txt strong {
    display: block;
    font-size: 15px;
    color: #1e2a52
}

.bd-pg .side-nav-card {
    background: linear-gradient(97deg, #5677E8 0%, #3d5cc4 100%);
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 8px 36px 0 #5677e81a
}

.bd-pg .side-nav-card .snc-lbl {
    font-size: 15px;
    color: #fbfbfbbf;
    margin-bottom: 14px;
    line-height: 1.1
}

.bd-pg .side-nav-card .snc-ttl {
    font-size: 21px;
    color: #FBFBFB;
    line-height: 1.1;
    margin-bottom: 28px
}

.bd-pg .side-nav-card a.snc-btn {
    display: inline-block;
    background: #D9B007;
    color: #1e2a52;
    font-size: 15px;
    line-height: 1.1;
    padding: 14px 28px;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 700;
    transition: clip-path .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.bd-pg .side-nav-card a.snc-btn:hover {
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
    box-shadow: 0 5px 25px 0 #d9b00740
}

.bd-pg .dk {
    background: #0d1a4a;
    padding: 96px 56px;
    position: relative;
    overflow: hidden
}

.bd-pg .dk-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg, #5677e80a 0px, #5677e80a 1px, transparent 1px, transparent 18px), repeating-linear-gradient(0deg, #5677e805 0px, #5677e805 2px, transparent 2px, transparent 54px), repeating-linear-gradient(0deg, #5677e804 0px, #5677e804 3px, transparent 3px, transparent 120px)
}

.bd-pg .dk-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto
}

.bd-pg .dk-ttl {
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.1;
    color: #FBFBFB;
    max-width: 520px;
    margin-bottom: 56px
}

.bd-pg .dk-ttl em {
    font-style: normal;
    color: #D9B007
}

.bd-pg .dk-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px
}

.bd-pg .dk-col {
    background: #5677e817;
    border-radius: 6px;
    padding: 28px;
    border-top: 2px solid #5677e84d;
    transition: background .6s ease, transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.bd-pg .dk-col:hover {
    background: #5677e829;
    transform: translateY(-4px);
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.bd-pg .dk-col-ico {
    width: 44px;
    height: 44px;
    background: #5677e82e;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    position: relative
}

.bd-pg .dk-col-ico i {
    font-size: 21px;
    color: #a8b8f0
}

.bd-pg .dk-col-ico .dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #D9B007;
    border-radius: 20px;
    border: 2px solid #0d1a4a
}

.bd-pg .dk-col-h {
    font-size: 21px;
    line-height: 1.1;
    color: #FBFBFB;
    margin-bottom: 14px
}

.bd-pg .dk-col p {
    font-size: 15px;
    line-height: 1.75;
    color: #fbfbfba6
}

.bd-pg .gt {
    padding: 96px 56px;
    background: #fff
}

.bd-pg .gt-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 36px 0 #5677e81a
}

.bd-pg .gt-top {
    grid-column: 1 / -1;
    background: linear-gradient(97deg, #5677e812 0%, transparent 100%);
    padding: 28px 28px 6px;
    border-bottom: 1px solid #5677e81a
}

.bd-pg .gt-top-h {
    font-size: clamp(21px, 2.5vw, 27px);
    line-height: 1.1;
    color: #1e2a52;
    background: linear-gradient(97deg, #5677E8 0%, #D9B007 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px
}

.bd-pg .gt-top-sub {
    font-size: 15px;
    line-height: 1.75;
    color: #5a6080;
    margin-bottom: 14px
}

.bd-pg .gt-card {
    padding: 28px;
    background: #fff;
    border-right: 1px solid #5677e814;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background .6s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.bd-pg .gt-card:last-child {
    border-right: none
}

.bd-pg .gt-card:hover {
    background: #5677e808;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.bd-pg .gt-card-ico {
    width: 40px;
    height: 40px;
    background: #5677e814;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0
}

.bd-pg .gt-card-ico i {
    font-size: 17px;
    color: #5677E8
}

.bd-pg .gt-card-ico .dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 20px;
    border: 2px solid #fff;
    background: #D9B007
}

.bd-pg .gt-card-h {
    font-size: 17px;
    line-height: 1.1;
    color: #1e2a52;
    font-weight: 700
}

.bd-pg .gt-card p {
    font-size: 15px;
    line-height: 1.75;
    color: #5a6080;
    margin: 0
}

.bd-pg .gt-card a.gt-lnk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #5677E8;
    text-decoration: none;
    margin-top: auto;
    font-weight: 600;
    transition: gap .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.bd-pg .gt-card a.gt-lnk:hover {
    gap: 14px;
    color: #D9B007;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%)
}

.bd-pg .gt-card a.gt-lnk i {
    font-size: 15px
}

@media (max-width: 900px) {
    .bd-pg .tb {
        padding: 28px 28px 56px
    }

    .bd-pg .art {
        padding: 56px 28px 28px
    }

    .bd-pg .art-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .bd-pg .art-side {
        flex-direction: row;
        flex-wrap: wrap
    }

    .bd-pg .side-legend,
    .bd-pg .side-nav-card {
        flex: 1 1 260px
    }

    .bd-pg .dk {
        padding: 56px 28px
    }

    .bd-pg .dk-cols {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .bd-pg .gt {
        padding: 56px 28px
    }

    .bd-pg .gt-inner {
        grid-template-columns: 1fr
    }

    .bd-pg .gt-card {
        border-right: none;
        border-bottom: 1px solid #5677e814
    }

    .bd-pg .gt-card:last-child {
        border-bottom: none
    }
}

@media (max-width: 600px) {
    .bd-pg .tb {
        padding: 14px 14px 56px
    }

    .bd-pg .tb-title {
        font-size: 37px
    }

    .bd-pg .art {
        padding: 28px 14px
    }

    .bd-pg .art-body h2 {
        font-size: 27px
    }

    .bd-pg .dk {
        padding: 56px 14px
    }

    .bd-pg .gt {
        padding: 56px 14px
    }

    .bd-pg .tb-meta {
        flex-wrap: wrap
    }
}

@keyframes zoomCycle {

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

    50% {
        transform: scale(1.04)
    }
}

.bd-pg .tb-img-wrap img.zoom-cycle {
    animation: zoomCycle 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
}

.qz {
    max-width: 100%;
    overflow-x: hidden
}

.qz .qz-inner {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 28px
}

.qz .qz-title {
    padding-top: 96px;
    padding-bottom: 56px;
    position: relative
}

.qz .qz-title .qz-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.qz .qt-eyebrow {
    font-size: 15px;
    line-height: 1.75;
    color: #5677E8;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 28px;
    opacity: 0;
    animation: qz-fade-up .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) .1s forwards
}

.qz .qt-h1 {
    font-size: clamp(37px, 6vw, 68px);
    line-height: 1.1;
    margin: 0 0 28px;
    max-width: 820px;
    opacity: 0;
    animation: qz-fade-up .65s cubic-bezier(0.25, 0.46, 0.45, 0.94) .25s forwards
}

.qz .qt-h1 em {
    font-style: italic;
    background: linear-gradient(97deg, #D9B007, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.qz .qt-sub {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3a3a;
    max-width: 560px;
    margin: 0 0 56px;
    opacity: 0;
    animation: qz-fade-up .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .4s forwards
}

.qz .qt-img-wrap {
    width: 100%;
    max-width: 900px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    opacity: 0;
    animation: qz-fade-up .8s cubic-bezier(0.25, 0.46, 0.45, 0.94) .55s forwards
}

.qz .qt-img-wrap img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    border-radius: 6px;
    filter: blur(0px)
}

.qz .qt-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(97deg, #5677e82e, transparent 60%);
    border-radius: 6px;
    pointer-events: none
}

.qz .qt-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #D9B007;
    color: #fff;
    font-size: 15px;
    line-height: 1.1;
    padding: 6px 14px;
    border-radius: 2px;
    font-weight: 600
}

.qz .qz-quiz {
    background: #FBFBFB;
    padding: 96px 0
}

.qz .qz-quiz .qz-inner {
    display: flex;
    flex-direction: column;
    align-items: center
}

.qz .quiz-head {
    text-align: center;
    margin-bottom: 56px;
    max-width: 640px
}

.qz .quiz-head h2 {
    font-size: clamp(27px, 4vw, 51px);
    line-height: 1.1;
    margin: 0 0 14px;
    background: linear-gradient(97deg, #5677E8, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.qz .quiz-head p {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3a3a;
    margin: 0
}

.qz .quiz-body {
    width: 100%;
    max-width: 780px
}

.qz .qz-step {
    display: none;
    flex-direction: column;
    gap: 28px;
    opacity: 0;
    animation: qz-fade-up .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.qz .qz-step.active {
    display: flex
}

.qz .qz-step.visible {
    opacity: 1
}

.qz .step-q {
    font-size: 21px;
    line-height: 1.75;
    color: #1b1b2e;
    font-weight: 600;
    margin: 0
}

.qz .step-num {
    font-size: 15px;
    color: #5677E8;
    line-height: 1.1;
    margin-bottom: 6px
}

.qz .opts {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.qz .opt-btn {
    background: #fff;
    border: 1.5px solid #e2e8ff;
    border-radius: 6px;
    padding: 14px 28px;
    font-size: 17px;
    line-height: 1.75;
    color: #1b1b2e;
    cursor: pointer;
    text-align: left;
    transition: border-color .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 1px 5px 0 #5677e812;
    clip-path: inset(0 0 0 0 round 6px);
    position: relative;
    overflow: hidden
}

.qz .opt-btn:hover {
    border-color: #5677E8;
    background: #f0f4ff;
    color: #5677E8;
    box-shadow: 0 5px 25px 0 #5677e814;
    clip-path: inset(-1px -1px -1px -1px round 8px)
}

.qz .opt-btn.selected {
    border-color: #5677E8;
    background: #5677E8;
    color: #fff;
    box-shadow: 0 5px 25px 0 #5677e81a
}

.qz .opt-btn:focus-visible {
    outline: 2px solid #D9B007;
    outline-offset: 2px
}

.qz .ripple-circle {
    position: absolute;
    border-radius: 20px;
    background: #5677e82e;
    transform: scale(0);
    animation: qz-ripple .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none
}

.qz .nav-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px
}

.qz .btn-prev {
    background: transparent;
    border: 1.5px solid #5677E8;
    color: #5677E8;
    border-radius: 6px;
    padding: 14px 28px;
    font-size: 17px;
    cursor: pointer;
    transition: background .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: inset(0 0 0 0 round 6px)
}

.qz .btn-prev:hover {
    background: #5677E8;
    color: #fff;
    clip-path: inset(-1px -1px -1px -1px round 8px)
}

.qz .btn-next {
    background: #5677E8;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 28px;
    font-size: 17px;
    cursor: pointer;
    transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 5px 25px 0 #5677e814;
    clip-path: inset(0 0 0 0 round 6px);
    position: relative;
    overflow: hidden
}

.qz .btn-next:hover {
    background: #3f5ed4;
    box-shadow: 0 8px 36px 0 #5677e81a;
    clip-path: inset(-1px -1px -1px -1px round 8px)
}

.qz .btn-next:disabled {
    opacity: .45;
    cursor: not-allowed
}

.qz .progress-bar {
    width: 100%;
    height: 4px;
    background: #e2e8ff;
    border-radius: 2px;
    margin-bottom: 28px;
    overflow: hidden
}

.qz .progress-fill {
    height: 100%;
    background: linear-gradient(97deg, #5677E8, #D9B007);
    border-radius: 2px;
    transition: width .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.qz .qz-result {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    padding: 56px 28px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 36px 0 #5677e81a;
    max-width: 680px;
    margin: 0 auto
}

.qz .qz-result.active {
    display: flex;
    animation: qz-fade-up .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.qz .res-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(97deg, #5677E8, #D9B007);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.qz .res-icon svg {
    width: 32px;
    height: 32px;
    fill: #fff
}

.qz .res-type {
    font-size: 15px;
    color: #5677E8;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.1
}

.qz .res-h {
    font-size: clamp(21px, 3vw, 37px);
    line-height: 1.1;
    color: #1b1b2e;
    margin: 0
}

.qz .res-desc {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3a3a;
    max-width: 520px;
    margin: 0
}

.qz .res-tips {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    text-align: left
}

.qz .res-tip {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    background: #FBFBFB;
    border-radius: 6px;
    padding: 14px;
    opacity: 0;
    animation: qz-fade-up .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.qz .res-tip:nth-child(1) {
    animation-delay: .1s
}

.qz .res-tip:nth-child(2) {
    animation-delay: .25s
}

.qz .res-tip:nth-child(3) {
    animation-delay: .4s
}

.qz .tip-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 2px;
    background: #D9B007;
    margin-top: 7px
}

.qz .tip-text {
    font-size: 17px;
    line-height: 1.75;
    color: #1b1b2e
}

.qz .btn-restart {
    background: transparent;
    border: 1.5px solid #5677E8;
    color: #5677E8;
    border-radius: 6px;
    padding: 14px 28px;
    font-size: 17px;
    cursor: pointer;
    transition: background .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: inset(0 0 0 0 round 6px)
}

.qz .btn-restart:hover {
    background: #5677E8;
    color: #fff;
    clip-path: inset(-1px -1px -1px -1px round 8px)
}

.qz .qz-context {
    padding: 96px 0 56px;
    background: #fff
}

.qz .ctx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start
}

.qz .ctx-left h2 {
    font-size: clamp(27px, 3.5vw, 37px);
    line-height: 1.1;
    margin: 0 0 28px;
    background: linear-gradient(97deg, #5677E8, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.qz .ctx-left p {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3a3a;
    margin: 0 0 14px
}

.qz .ctx-right {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.qz .ctx-stat {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: flex-start;
    opacity: 0;
    animation: qz-fade-up .65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.qz .ctx-stat:nth-child(1) {
    animation-delay: .1s
}

.qz .ctx-stat:nth-child(2) {
    animation-delay: .3s
}

.qz .ctx-stat:nth-child(3) {
    animation-delay: .5s
}

.qz .stat-num {
    font-size: clamp(37px, 5vw, 51px);
    line-height: 1.1;
    color: #5677E8;
    font-weight: 700;
    min-width: 80px
}

.qz .stat-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px
}

.qz .stat-label {
    font-size: 17px;
    line-height: 1.1;
    color: #1b1b2e;
    font-weight: 600
}

.qz .stat-desc {
    font-size: 15px;
    line-height: 1.75;
    color: #3a3a3a
}

.qz .qz-about {
    padding: 56px 0 96px;
    background: linear-gradient(97deg, #FBFBFB, transparent);
    position: relative
}

.qz .qz-about::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(97deg, transparent, #5677E8 40%, transparent);
    margin-bottom: 56px
}

.qz .about-row {
    display: flex;
    flex-direction: row;
    gap: 56px;
    align-items: flex-start
}

.qz .about-badge {
    background: #5677E8;
    color: #fff;
    border-radius: 2px;
    padding: 6px 14px;
    font-size: 15px;
    line-height: 1.1;
    font-weight: 600;
    white-space: nowrap;
    align-self: flex-start
}

.qz .about-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px
}

.qz .about-text h2 {
    font-size: clamp(21px, 3vw, 37px);
    line-height: 1.1;
    margin: 0;
    background: linear-gradient(97deg, #D9B007, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.qz .about-text p {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3a3a;
    margin: 0;
    max-width: 640px
}

.qz .about-links {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap
}

.qz .about-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #e2e8ff;
    border-radius: 6px;
    padding: 14px 28px;
    font-size: 17px;
    color: #5677E8;
    text-decoration: none;
    transition: border-color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), background .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 1px 5px 0 #5677e812;
    clip-path: inset(0 0 0 0 round 6px)
}

.qz .about-link:hover {
    background: #5677E8;
    color: #fff;
    border-color: #5677E8;
    clip-path: inset(-1px -1px -1px -1px round 8px)
}

.qz .about-link i {
    font-size: 15px
}

.qz .div-fade {
    height: 1px;
    background: linear-gradient(97deg, transparent, #D9B007 40%, transparent);
    margin: 0
}

@keyframes qz-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

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

@keyframes qz-ripple {
    to {
        transform: scale(4);
        opacity: 0
    }
}

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

    .qz .about-row {
        flex-direction: column;
        gap: 28px
    }

    .qz .qt-img-wrap img {
        height: 280px
    }
}

@media (max-width: 600px) {
    .qz .qt-h1 {
        font-size: 37px
    }

    .qz .nav-row {
        flex-direction: column;
        gap: 14px;
        align-items: stretch
    }

    .qz .btn-prev,
    .qz .btn-next {
        text-align: center
    }

    .qz .about-links {
        flex-direction: column
    }

    .qz .stat-num {
        min-width: 60px;
        font-size: 37px
    }
}

.gds {
    max-width: 1366px;
    margin: 0 auto;
    overflow-x: clip
}

.gds .ttl-blk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    padding: 56px;
    background: #FBFBFB;
    position: relative
}

.gds .ttl-blk .geo-dec {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 80px;
    height: 80px;
    border: 1px solid #5677e81f;
    border-radius: 2px;
    transform: rotate(22deg);
    pointer-events: none
}

.gds .ttl-blk .geo-dec2 {
    position: absolute;
    bottom: 28px;
    left: 200px;
    width: 44px;
    height: 44px;
    border: 1px solid #d9b00726;
    border-radius: 2px;
    transform: rotate(11deg);
    pointer-events: none
}

.gds .ttl-txt {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.gds .ttl-txt .eyebrow {
    font-size: 15px;
    line-height: 1.75;
    color: #5677E8;
    letter-spacing: .08em;
    text-transform: uppercase
}

.gds .ttl-txt h1 {
    font-size: 51px;
    line-height: 1.1;
    color: #1e2340;
    margin: 0
}

.gds .ttl-txt h1 .grad-word {
    background: linear-gradient(97deg, #D9B007, transparent);
    background: linear-gradient(97deg, #D9B007, #5677E8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.gds .ttl-txt .sub-p {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3f5c;
    max-width: 440px;
    margin: 0
}

.gds .img-wrap {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 36px 0 #5677e81a
}

.gds .img-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to bottom, #1e23408c, transparent);
    pointer-events: none
}

.gds .img-wrap img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
    transition: clip-path .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.gds .img-wrap:hover img {
    clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%)
}

.gds .img-wrap .color-wash {
    position: absolute;
    inset: 0;
    background: #5677e847;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none
}

.gds .img-wrap:hover .color-wash {
    opacity: 1
}

.gds .wavy-top {
    width: 100%;
    overflow: hidden;
    line-height: 0
}

.gds .wavy-top svg {
    display: block;
    width: 100%
}

.gds .three-dots {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 28px 0
}

.gds .three-dots span {
    width: 6px;
    height: 6px;
    border-radius: 20px;
    background: #5677E8;
    display: block
}

.gds .three-dots span:nth-child(2) {
    background: #D9B007
}

.gds .three-dots span:nth-child(3) {
    background: #5677e84d
}

.gds .paths-blk {
    background: #1e2340;
    padding: 96px 56px;
    position: relative
}

.gds .paths-blk::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, #5677e814 0%, #0a0f2859 70%);
    pointer-events: none
}

.gds .paths-blk .wavy-line-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none
}

.gds .paths-hd {
    text-align: center;
    margin-bottom: 56px;
    position: relative
}

.gds .paths-hd h2 {
    font-size: 37px;
    line-height: 1.1;
    margin: 0 0 14px;
    background: linear-gradient(97deg, #FBFBFB, #5677E8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.gds .paths-hd p {
    font-size: 17px;
    line-height: 1.75;
    color: #fbfbfbb3;
    max-width: 520px;
    margin: 0 auto
}

.gds .three-col {
    display: grid;
    grid-template-columns: 1fr 0.75fr 1fr;
    gap: 28px;
    position: relative
}

.gds .path-card {
    background: #fbfbfb0d;
    border: 1px solid #5677e82e;
    border-radius: 6px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background .5s ease, border-color .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 95%, 97% 100%, 0 100%)
}

.gds .path-card:hover {
    background: #5677e81a;
    border-color: #5677e866;
    clip-path: polygon(0 0, 100% 0, 100% 97%, 98% 100%, 0 100%)
}

.gds .path-card.mid {
    align-self: end;
    padding-bottom: 56px
}

.gds .path-card .num-split {
    font-size: 51px;
    line-height: 1.1;
    font-weight: 700
}

.gds .path-card .num-split .int-part {
    color: #5677E8
}

.gds .path-card .num-split .frac-part {
    color: #D9B007;
    font-size: 27px
}

.gds .path-card h3 {
    font-size: 21px;
    line-height: 1.1;
    color: #FBFBFB;
    margin: 0
}

.gds .path-card p {
    font-size: 15px;
    line-height: 1.75;
    color: #fbfbfba6;
    margin: 0
}

.gds .path-card .tag-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px
}

.gds .path-card .tag {
    font-size: 15px;
    padding: 6px 14px;
    border-radius: 2px;
    background: #5677e826;
    color: #a8b8f5;
    border: 1px solid #5677e833
}

.gds .path-card .icon-circ {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #5677e82e;
    display: flex;
    align-items: center;
    justify-content: center
}

.gds .path-card .icon-circ i {
    color: #5677E8;
    font-size: 17px
}

.gds .depth-blk {
    background: #FBFBFB;
    padding: 96px 56px
}

.gds .depth-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: start
}

.gds .depth-txt h2 {
    font-size: 37px;
    line-height: 1.1;
    color: #1e2340;
    margin: 0 0 28px;
    background: linear-gradient(97deg, #D9B007, #5677E8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.gds .depth-txt p {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3f5c;
    margin: 0 0 14px;
    max-width: 540px
}

.gds .reveal-stack {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.gds .rev-item {
    border: 1px solid #5677e826;
    border-radius: 6px;
    position: relative;
    overflow: hidden
}

.gds .rev-item .overlay {
    position: absolute;
    inset: 0;
    background: #FBFBFB;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 6px;
    z-index: 2;
    cursor: pointer
}

.gds .rev-item:hover .overlay {
    opacity: 0;
    pointer-events: none
}

.gds .rev-item .overlay-lbl {
    font-size: 15px;
    color: #5677E8;
    border: 1px solid #5677e84d;
    border-radius: 2px;
    padding: 6px 14px;
    background: #5677e80f;
    transition: background .5s ease
}

.gds .rev-item:hover .overlay-lbl {
    background: #5677e81f
}

.gds .rev-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.gds .rev-content h4 {
    font-size: 17px;
    line-height: 1.1;
    color: #1e2340;
    margin: 0
}

.gds .rev-content p {
    font-size: 15px;
    line-height: 1.75;
    color: #4a5070;
    margin: 0
}

.gds .rev-content .step-num {
    font-size: 27px;
    font-weight: 700;
    color: #5677e833;
    line-height: 1.1
}

.gds .action-blk {
    background: linear-gradient(97deg, #FBFBFB, transparent);
    background-color: #eef1fc;
    padding: 96px 56px;
    position: relative
}

.gds .action-blk .wavy-line-btm {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none
}

.gds .action-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center
}

.gds .action-inner h2 {
    font-size: 37px;
    line-height: 1.1;
    color: #1e2340;
    margin: 0;
    background: linear-gradient(97deg, #5677E8, #D9B007);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.gds .action-inner p {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3f5c;
    margin: 0
}

.gds .action-links {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center
}

.gds .btn-pri {
    display: inline-block;
    padding: 14px 28px;
    background: #5677E8;
    color: #FBFBFB;
    border-radius: 6px;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid #5677E8;
    box-shadow: 0 5px 25px 0 #5677e814;
    transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s ease, clip-path .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%);
    position: relative;
    overflow: hidden
}

.gds .btn-pri:hover {
    background: #3d5cd4;
    box-shadow: 0 8px 36px 0 #5677e81a;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 2% 100%);
    color: #FBFBFB
}

.gds .btn-sec {
    display: inline-block;
    padding: 14px 28px;
    background: transparent;
    color: #5677E8;
    border-radius: 6px;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid #5677E8;
    transition: background .6s ease, color .5s ease, clip-path .5s ease;
    clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%)
}

.gds .btn-sec:hover {
    background: #5677e814;
    clip-path: polygon(0 0, 98% 0, 100% 100%, 0 100%);
    color: #5677E8
}

.gds .metrics-row {
    display: flex;
    flex-direction: row;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center
}

.gds .met-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 28px;
    border-radius: 6px;
    background: #5677e80f;
    border: 1px solid #5677e81f
}

.gds .met-item .met-num {
    font-size: 37px;
    font-weight: 700;
    line-height: 1.1
}

.gds .met-item .met-num .int-part {
    color: #5677E8
}

.gds .met-item .met-num .frac-part {
    color: #D9B007;
    font-size: 21px
}

.gds .met-item .met-lbl {
    font-size: 15px;
    color: #4a5070;
    line-height: 1.75
}

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

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

.gds .anim-reveal {
    animation: clipReveal .8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

.gds .anim-reveal.d1 {
    animation-delay: .1s
}

.gds .anim-reveal.d2 {
    animation-delay: .25s
}

.gds .anim-reveal.d3 {
    animation-delay: .4s
}

@media (max-width: 1200px) {
    .gds .ttl-blk {
        gap: 28px;
        padding: 56px 28px
    }

    .gds .paths-blk {
        padding: 56px 28px
    }

    .gds .depth-blk {
        padding: 56px 28px
    }

    .gds .action-blk {
        padding: 56px 28px
    }

    .gds .three-col {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 900px) {
    .gds .ttl-blk {
        grid-template-columns: 1fr;
        padding: 56px 28px
    }

    .gds .img-wrap img {
        height: 300px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }

    .gds .img-wrap:hover img {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }

    .gds .three-col {
        grid-template-columns: 1fr
    }

    .gds .path-card.mid {
        padding-bottom: 28px;
        align-self: auto
    }

    .gds .depth-inner {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .gds .ttl-txt h1 {
        font-size: 37px
    }
}

@media (max-width: 600px) {
    .gds .ttl-blk {
        padding: 28px 14px;
        gap: 28px
    }

    .gds .ttl-txt h1 {
        font-size: 27px
    }

    .gds .ttl-txt .sub-p {
        font-size: 15px
    }

    .gds .paths-blk {
        padding: 56px 14px
    }

    .gds .depth-blk {
        padding: 56px 14px
    }

    .gds .action-blk {
        padding: 56px 14px
    }

    .gds .action-inner h2 {
        font-size: 27px
    }

    .gds .paths-hd h2 {
        font-size: 27px
    }

    .gds .action-links {
        flex-direction: column;
        align-items: center
    }

    .gds .metrics-row {
        gap: 14px
    }
}

.dbt {
    max-width: 100%;
    overflow-x: hidden
}

.dbt .inner-cap {
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px
}

.dbt .grad-text {
    background: linear-gradient(97deg, #FBFBFB, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.dbt .grad-text-dark {
    background: linear-gradient(97deg, #5677E8, #D9B007);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.dbt .tb {
    background: #5677E8;
    padding-top: 96px;
    padding-bottom: 56px;
    position: relative
}

.dbt .tb-curves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.dbt .tb-curves svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    opacity: .13
}

.dbt .tb-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 56px;
    position: relative
}

.dbt .tb-text {
    flex: 1 1 0;
    min-width: 0
}

.dbt .tb-eyebrow {
    font-size: 15px;
    color: #D9B007;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
    line-height: 1.75
}

.dbt .tb-h1 {
    font-size: clamp(37px, 5vw, 68px);
    line-height: 1.1;
    color: #FBFBFB;
    margin-bottom: 28px
}

.dbt .tb-h1 em {
    font-style: italic;
    color: #D9B007;
    -webkit-text-fill-color: #D9B007
}

.dbt .tb-sub {
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.75;
    color: #fbfbfbd1;
    max-width: 520px;
    margin-bottom: 28px
}

.dbt .tb-actions {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap
}

.dbt .btn-prim {
    display: inline-block;
    background: #D9B007;
    color: #1a1200;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: clip-path .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: 0 5px 25px 0 #5677e814
}

.dbt .btn-prim:hover {
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
    box-shadow: 0 8px 36px 0 #5677e81a
}

.dbt .btn-sec {
    display: inline-block;
    background: transparent;
    color: #FBFBFB;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 6px;
    border: 2px solid #fbfbfb80;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .6s ease, color .5s ease, clip-path .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.dbt .btn-sec:hover {
    border-color: #FBFBFB;
    clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%)
}

.dbt .tb-img-side {
    flex: 0 0 340px;
    position: relative
}

.dbt .tb-img-wrap {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/3;
    box-shadow: 0 8px 36px 0 #5677e81a
}

.dbt .tb-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block
}

.dbt .tb-img-leak {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse at 0% 0%, #d9b00773 0%, transparent 70%);
    pointer-events: none;
    border-radius: 20px 0 0 0
}

.dbt .tb-abbr {
    position: absolute;
    bottom: -28px;
    right: -14px;
    font-size: 68px;
    font-weight: 900;
    color: #fbfbfb12;
    line-height: 1.1;
    pointer-events: none;
    white-space: nowrap
}

.dbt .chev {
    display: block;
    width: 100%;
    line-height: 0
}

.dbt .chev svg {
    display: block;
    width: 100%
}

.dbt .feed-wrap {
    background: #FBFBFB;
    padding-top: 56px;
    padding-bottom: 56px
}

.dbt .feed-label {
    font-size: 15px;
    color: #5677E8;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 14px;
    line-height: 1.75
}

.dbt .feed-h2 {
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.1;
    margin-bottom: 28px;
    color: #232323
}

.dbt .feed-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 28px
}

.dbt .post-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 5px 0 #5677e812;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), clip-path .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: relative
}

.dbt .post-card:hover {
    box-shadow: 0 8px 36px 0 #5677e81a;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.dbt .post-card.featured {
    grid-row: 1 / 3
}

.dbt .post-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    display: block
}

.dbt .post-card.featured .post-img {
    aspect-ratio: 4/3
}

.dbt .post-body {
    padding: 14px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.dbt .post-tag {
    font-size: 15px;
    color: #5677E8;
    font-weight: 600;
    line-height: 1.75
}

.dbt .post-title {
    font-size: 17px;
    font-weight: 700;
    color: #232323;
    line-height: 1.75
}

.dbt .post-card.featured .post-title {
    font-size: 21px
}

.dbt .post-desc {
    font-size: 15px;
    color: #444;
    line-height: 1.75;
    flex: 1 1 auto
}

.dbt .post-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: #888;
    padding: 6px 14px 14px
}

.dbt .post-meta .likes {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px
}

.dbt .post-meta .likes i {
    color: #D9B007
}

.dbt .post-date {
    margin-left: auto
}

.dbt .author-wrap {
    background: #fff;
    padding-top: 56px;
    padding-bottom: 56px;
    position: relative
}

.dbt .author-split {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.dbt .author-split::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(97deg, #FBFBFB, transparent);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%)
}

.dbt .author-grid {
    display: flex;
    flex-direction: row;
    gap: 56px;
    align-items: center;
    position: relative
}

.dbt .author-portrait {
    flex: 0 0 120px
}

.dbt .author-portrait img {
    width: 120px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
    box-shadow: 0 5px 25px 0 #5677e814;
    display: block
}

.dbt .author-info {
    flex: 1 1 0;
    min-width: 0
}

.dbt .author-label {
    font-size: 15px;
    color: #D9B007;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
    line-height: 1.75
}

.dbt .author-name {
    font-size: clamp(21px, 2.5vw, 27px);
    font-weight: 700;
    color: #232323;
    line-height: 1.1;
    margin-bottom: 14px
}

.dbt .author-bio {
    font-size: 17px;
    line-height: 1.75;
    color: #444;
    max-width: 580px
}

.dbt .author-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 15px;
    color: #5677E8;
    font-weight: 600;
    text-decoration: none;
    transition: color .5s ease
}

.dbt .author-link:hover {
    color: #D9B007
}

.dbt .arc-wrap {
    background: linear-gradient(97deg, #5677E8 60%, transparent);
    padding-top: 56px;
    padding-bottom: 56px;
    position: relative;
    overflow: hidden
}

.dbt .arc-abbr {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 68px;
    font-weight: 900;
    color: #fbfbfb14;
    line-height: 1.1;
    pointer-events: none;
    white-space: nowrap
}

.dbt .arc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 28px;
    margin-top: 28px
}

.dbt .arc-stat {
    background: #fbfbfb1f;
    border-radius: 6px;
    padding: 28px 14px;
    text-align: center;
    border: 1px solid #fbfbfb2e;
    transition: background .6s ease, clip-path .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.dbt .arc-stat:hover {
    background: #fbfbfb33;
    clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%)
}

.dbt .arc-num {
    font-size: 37px;
    font-weight: 900;
    color: #D9B007;
    line-height: 1.1;
    margin-bottom: 6px
}

.dbt .arc-desc {
    font-size: 15px;
    color: #fbfbfbd9;
    line-height: 1.75
}

.dbt .arc-h2 {
    font-size: clamp(21px, 2.5vw, 27px);
    line-height: 1.1;
    color: #FBFBFB;
    margin-bottom: 6px
}

.dbt .arc-sub {
    font-size: 17px;
    color: #fbfbfbc7;
    line-height: 1.75;
    max-width: 560px
}

.dbt .dirs-wrap {
    background: #FBFBFB;
    padding-top: 56px;
    padding-bottom: 56px
}

.dbt .dirs-h2 {
    font-size: clamp(21px, 2.5vw, 27px);
    line-height: 1.1;
    color: #232323;
    margin-bottom: 6px
}

.dbt .dirs-sub {
    font-size: 17px;
    color: #555;
    line-height: 1.75;
    margin-bottom: 28px;
    max-width: 540px
}

.dbt .dirs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px
}

.dbt .dir-card {
    background: #fff;
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 1px 5px 0 #5677e812;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow .7s cubic-bezier(0.25, 0.46, 0.45, 0.94), clip-path .55s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: relative
}

.dbt .dir-card:hover {
    box-shadow: 0 8px 36px 0 #5677e81a;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.dbt .dir-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(97deg, #5677e81f, #d9b00714);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #5677E8;
    position: relative
}

.dbt .dir-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    border: 1.5px solid transparent;
    transition: border-color .7s ease
}

.dbt .dir-card:hover .dir-icon::after {
    border-color: #5677E8
}

.dbt .dir-name {
    font-size: 17px;
    font-weight: 700;
    color: #232323;
    line-height: 1.1
}

.dbt .dir-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.75;
    flex: 1 1 auto
}

.dbt .dir-arrow {
    font-size: 15px;
    color: #5677E8;
    transition: color .5s ease
}

.dbt .dir-card:hover .dir-arrow {
    color: #D9B007
}

.dbt .entry-wrap {
    background: #fff;
    padding-top: 56px;
    padding-bottom: 56px
}

.dbt .entry-h2 {
    font-size: clamp(21px, 2.5vw, 27px);
    line-height: 1.1;
    color: #232323;
    margin-bottom: 6px
}

.dbt .entry-sub {
    font-size: 17px;
    color: #555;
    line-height: 1.75;
    margin-bottom: 28px;
    max-width: 540px
}

.dbt .entry-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 28px;
    align-items: start
}

.dbt .entry-img-block {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16/9;
    box-shadow: 0 5px 25px 0 #5677e814
}

.dbt .entry-img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block
}

.dbt .entry-img-cap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, #5677e8d9 0%, transparent 100%);
    padding: 28px 14px 14px
}

.dbt .entry-img-cap-text {
    font-size: 17px;
    font-weight: 700;
    color: #FBFBFB;
    line-height: 1.75
}

.dbt .entry-list {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.dbt .entry-item {
    background: #FBFBFB;
    border-radius: 6px;
    padding: 14px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    transition: box-shadow .6s ease, clip-path .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.dbt .entry-item:hover {
    box-shadow: 0 5px 25px 0 #5677e814;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%)
}

.dbt .entry-num {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 2px;
    background: #5677E8;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center
}

.dbt .entry-item-text {
    flex: 1 1 0;
    min-width: 0
}

.dbt .entry-item-title {
    font-size: 15px;
    font-weight: 700;
    color: #232323;
    line-height: 1.75
}

.dbt .entry-item-hint {
    font-size: 15px;
    color: #666;
    line-height: 1.75
}

.dbt .cont-wrap {
    background: #FBFBFB;
    padding-top: 56px;
    padding-bottom: 56px;
    position: relative
}

.dbt .cont-abbr {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 68px;
    font-weight: 900;
    color: #5677e80f;
    line-height: 1.1;
    pointer-events: none;
    white-space: nowrap
}

.dbt .cont-h2 {
    font-size: clamp(21px, 2.5vw, 27px);
    line-height: 1.1;
    color: #232323;
    margin-bottom: 6px
}

.dbt .cont-sub {
    font-size: 17px;
    color: #555;
    line-height: 1.75;
    margin-bottom: 28px;
    max-width: 540px
}

.dbt .diag-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap
}

.dbt .diag-node {
    background: #fff;
    border-radius: 6px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    color: #232323;
    box-shadow: 0 1px 5px 0 #5677e812;
    text-align: center;
    position: relative;
    transition: box-shadow .6s ease, clip-path .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.dbt .diag-node:hover {
    box-shadow: 0 5px 25px 0 #5677e814;
    clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%)
}

.dbt .diag-node .node-label {
    font-size: 15px;
    color: #5677E8;
    font-weight: 600;
    line-height: 1.75
}

.dbt .diag-node .node-sub {
    font-size: 15px;
    color: #666;
    line-height: 1.75
}

.dbt .diag-arrow {
    color: #D9B007;
    font-size: 21px;
    flex-shrink: 0
}

.dbt .cont-cta {
    margin-top: 28px;
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap
}

.dbt .btn-outline {
    display: inline-block;
    background: transparent;
    color: #5677E8;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 6px;
    border: 2px solid #5677E8;
    cursor: pointer;
    text-decoration: none;
    transition: background .6s ease, color .5s ease, clip-path .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.dbt .btn-outline:hover {
    background: #5677E8;
    color: #fff;
    clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%)
}

.dbt .conv-wrap {
    background: #fff;
    padding-top: 56px;
    padding-bottom: 56px;
    position: relative
}

.dbt .conv-split {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.dbt .conv-split::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(97deg, #d9b00712, transparent);
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%)
}

.dbt .conv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    position: relative
}

.dbt .conv-h2 {
    font-size: clamp(21px, 2.5vw, 27px);
    line-height: 1.1;
    color: #232323;
    margin-bottom: 14px
}

.dbt .conv-body {
    font-size: 17px;
    line-height: 1.75;
    color: #444;
    margin-bottom: 14px
}

.dbt .conv-form {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.dbt .conv-form input,
.dbt .conv-form textarea {
    width: 100%;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
    font-size: 15px;
    color: #232323;
    background: #FBFBFB;
    outline: none;
    transition: border-color .6s ease;
    resize: none;
    box-sizing: border-box
}

.dbt .conv-form input:focus,
.dbt .conv-form textarea:focus {
    border-color: #5677E8
}

.dbt .conv-form input::placeholder,
.dbt .conv-form textarea::placeholder {
    color: #aaa
}

.dbt .conv-btn {
    display: inline-block;
    background: #5677E8;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: box-shadow .6s ease, clip-path .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: 0 1px 5px 0 #5677e812;
    position: relative;
    overflow: hidden
}

.dbt .conv-btn:hover {
    box-shadow: 0 8px 36px 0 #5677e81a;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%)
}

.dbt .conv-topics {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.dbt .conv-topic-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: #FBFBFB;
    border-radius: 6px;
    transition: box-shadow .6s ease
}

.dbt .conv-topic-item:hover {
    box-shadow: 0 5px 25px 0 #5677e814
}

.dbt .conv-topic-icon {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 2px;
    background: linear-gradient(97deg, #5677e826, #d9b0071a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5677E8;
    font-size: 15px
}

.dbt .conv-topic-text {
    flex: 1 1 0;
    font-size: 15px;
    color: #444;
    line-height: 1.75
}

@media (max-width: 1200px) {
    .dbt .feed-grid {
        grid-template-columns: 1fr 1fr
    }

    .dbt .post-card.featured {
        grid-column: 1 / 3;
        grid-row: auto
    }

    .dbt .arc-grid {
        grid-template-columns: 1fr 1fr
    }

    .dbt .dirs-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 900px) {
    .dbt .tb-grid {
        flex-direction: column
    }

    .dbt .tb-img-side {
        flex: 0 0 auto;
        width: 100%
    }

    .dbt .author-grid {
        flex-direction: column;
        gap: 28px
    }

    .dbt .entry-grid {
        grid-template-columns: 1fr
    }

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

    .dbt .diag-wrap {
        flex-direction: column
    }

    .dbt .diag-arrow {
        transform: rotate(90deg)
    }
}

@media (max-width: 600px) {
    .dbt .feed-grid {
        grid-template-columns: 1fr
    }

    .dbt .post-card.featured {
        grid-column: auto
    }

    .dbt .arc-grid {
        grid-template-columns: 1fr 1fr
    }

    .dbt .dirs-grid {
        grid-template-columns: 1fr
    }

    .dbt .tb-h1 {
        font-size: 37px
    }

    .dbt .tb-img-side {
        display: none
    }
}

.blg {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0;
    overflow-x: clip
}

.blg .pg-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
    position: relative
}

.blg .pg-top .txt-col {
    padding: 96px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #FBFBFB;
    position: relative
}

.blg .pg-top .txt-col::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 28px;
    right: 0;
    bottom: 28px;
    border-top: 1px solid #5677e826;
    border-left: 1px solid #5677e826;
    pointer-events: none
}

.blg .pg-top .img-col {
    position: relative;
    overflow: hidden
}

.blg .pg-top .img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    animation: maskReveal .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

@keyframes maskReveal {
    from {
        clip-path: inset(50% 50% 50% 50%);
        opacity: .4
    }

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

.blg .pg-top .img-col .img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #5677e859 0%, transparent 60%);
    pointer-events: none
}

.blg .pg-top .geo-a {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid #d9b0072e;
    border-radius: 2px;
    bottom: 56px;
    right: 28px;
    transform: rotate(22deg);
    pointer-events: none
}

.blg .pg-top .geo-b {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #5677e812;
    border-radius: 6px;
    top: 56px;
    right: 96px;
    transform: rotate(-12deg);
    pointer-events: none
}

.blg .pg-top .lbl {
    font-size: 15px;
    line-height: 1.75;
    color: #5677E8;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px
}

.blg .pg-top .ph {
    font-size: clamp(37px, 4vw, 51px);
    line-height: 1.1;
    color: #1b2340;
    margin-bottom: 28px
}

.blg .pg-top .ph em {
    font-style: italic;
    background: linear-gradient(97deg, #FBFBFB 0%, transparent 100%), linear-gradient(97deg, #D9B007, #5677E8);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-style: normal
}

.blg .pg-top .sub {
    font-size: 17px;
    line-height: 1.75;
    color: #3a4460;
    max-width: 420px
}

.blg .divider-tri {
    width: 100%;
    line-height: 0;
    overflow: hidden
}

.blg .divider-tri svg {
    display: block;
    width: 100%
}

.blg .posts-area {
    background: #FBFBFB;
    padding: 96px 56px
}

.blg .posts-area .area-head {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 56px;
    padding-bottom: 28px;
    border-bottom: 1px solid #5677e81f
}

.blg .posts-area .area-head h2 {
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.1;
    color: #1b2340;
    margin: 0
}

.blg .posts-area .area-head h2 span {
    background: linear-gradient(97deg, #D9B007, #5677E8);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.blg .posts-area .area-head .all-link {
    font-size: 15px;
    line-height: 1.75;
    color: #5677E8;
    text-decoration: none !important;
    border-bottom: 1px solid #5677e84d;
    padding-bottom: 2px;
    transition: border-color .5s ease, color .5s ease
}

.blg .posts-area .area-head .all-link:hover {
    color: #D9B007;
    border-color: #d9b00780
}

.blg .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px
}

.blg .cards-grid .pcard {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 5px 0 #5677e812;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.blg .cards-grid .pcard:hover {
    box-shadow: 0 8px 36px 0 #5677e81a;
    transform: translateY(-4px);
    clip-path: polygon(0 0, 100% 0, 100% 97%, 2% 100%)
}

.blg .cards-grid .pcard .pcard-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9
}

.blg .cards-grid .pcard .pcard-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.blg .cards-grid .pcard:hover .pcard-img img {
    transform: scale(1.04)
}

.blg .cards-grid .pcard .pcard-img .ptag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #5677E8;
    color: #fff;
    font-size: 15px;
    line-height: 1.1;
    padding: 6px 14px;
    border-radius: 2px;
    text-decoration: none !important;
    transition: background .5s ease
}

.blg .cards-grid .pcard .pcard-img .ptag:hover {
    background: #D9B007
}

.blg .cards-grid .pcard .pcard-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px
}

.blg .cards-grid .pcard .pcard-body h3 {
    font-size: 21px;
    line-height: 1.1;
    color: #1b2340;
    margin: 0
}

.blg .cards-grid .pcard .pcard-body h3 a {
    color: inherit;
    text-decoration: none !important;
    transition: color .5s ease
}

.blg .cards-grid .pcard .pcard-body h3 a:hover {
    color: #5677E8
}

.blg .cards-grid .pcard .pcard-body .pdesc {
    font-size: 15px;
    line-height: 1.75;
    color: #3a4460;
    margin: 0;
    flex: 1
}

.blg .cards-grid .pcard .pcard-foot {
    padding: 14px 28px;
    border-top: 1px solid #5677e817;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.blg .cards-grid .pcard .pcard-foot .pdate {
    font-size: 15px;
    line-height: 1.75;
    color: #7a87aa
}

.blg .cards-grid .pcard .pcard-foot .plikes {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    line-height: 1.75;
    color: #7a87aa
}

.blg .cards-grid .pcard .pcard-foot .plikes i {
    color: #D9B007;
    font-size: 15px
}

.blg .cards-grid .pcard .pcard-body .read-btn {
    display: inline-block;
    padding: 14px 28px;
    background: #5677E8;
    color: #fff;
    font-size: 15px;
    line-height: 1.1;
    border-radius: 6px;
    text-decoration: none !important;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), clip-path .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.blg .cards-grid .pcard .pcard-body .read-btn:hover {
    background: #3d5bc4;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.blg .divider-gap {
    height: 2px;
    background: linear-gradient(97deg, #FBFBFB, transparent)
}

.blg .metric-band {
    background: #1b2340;
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
    align-items: center
}

.blg .metric-band .met-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center
}

.blg .metric-band .met-item .met-nums {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px
}

.blg .metric-band .met-item .met-from {
    font-size: 27px;
    line-height: 1.1;
    color: #fbfbfb73
}

.blg .metric-band .met-item .met-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.blg .metric-band .met-item .met-arrow svg {
    width: 28px;
    height: 14px
}

.blg .metric-band .met-item .met-to {
    font-size: clamp(37px, 4vw, 51px);
    line-height: 1.1;
    color: #D9B007
}

.blg .metric-band .met-item .met-label {
    font-size: 15px;
    line-height: 1.75;
    color: #fbfbfb99;
    text-transform: uppercase;
    letter-spacing: .06em
}

.blg .quiz-band {
    background: #FBFBFB;
    padding: 96px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center
}

.blg .quiz-band .qb-txt {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.blg .quiz-band .qb-txt h2 {
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.1;
    color: #1b2340;
    margin: 0
}

.blg .quiz-band .qb-txt h2 em {
    font-style: italic;
    color: #5677E8
}

.blg .quiz-band .qb-txt p {
    font-size: 17px;
    line-height: 1.75;
    color: #3a4460;
    margin: 0;
    max-width: 440px
}

.blg .quiz-band .qb-txt .q-link {
    display: inline-block;
    padding: 14px 28px;
    border: 2px solid #5677E8;
    color: #5677E8;
    font-size: 17px;
    line-height: 1.1;
    border-radius: 6px;
    text-decoration: none !important;
    align-self: flex-start;
    position: relative;
    overflow: hidden;
    transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), clip-path .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0
}

.blg .quiz-band .qb-txt .q-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #5677E8;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1
}

.blg .quiz-band .qb-txt .q-link:hover {
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.blg .quiz-band .qb-txt .q-link:hover::before {
    transform: scaleX(1)
}

.blg .quiz-band .qb-vis {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.blg .quiz-band .qb-vis .qv-item {
    background: #fff;
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 5px 25px 0 #5677e814;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    transition: transform .5s ease, box-shadow .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.blg .quiz-band .qb-vis .qv-item:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 36px 0 #5677e81a;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 1% 100%)
}

.blg .quiz-band .qb-vis .qv-item .qi-icon {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #5677e817;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.blg .quiz-band .qb-vis .qv-item .qi-icon i {
    color: #5677E8;
    font-size: 21px
}

.blg .quiz-band .qb-vis .qv-item .qi-txt {
    font-size: 17px;
    line-height: 1.75;
    color: #1b2340
}

@media (max-width: 1200px) {
    .blg .cards-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .blg .pg-top .txt-col {
        padding: 56px 28px
    }
}

@media (max-width: 900px) {
    .blg .pg-top {
        grid-template-columns: 1fr
    }

    .blg .pg-top .img-col {
        height: 300px
    }

    .blg .metric-band {
        grid-template-columns: 1fr 1fr;
        padding: 56px 28px
    }

    .blg .metric-band .met-item:last-child {
        grid-column: span 2
    }

    .blg .quiz-band {
        grid-template-columns: 1fr;
        padding: 56px 28px;
        gap: 28px
    }

    .blg .posts-area {
        padding: 56px 28px
    }
}

@media (max-width: 600px) {
    .blg .cards-grid {
        grid-template-columns: 1fr
    }

    .blg .metric-band {
        grid-template-columns: 1fr
    }

    .blg .metric-band .met-item:last-child {
        grid-column: span 1
    }

    .blg .pg-top .txt-col {
        padding: 56px 14px
    }

    .blg .posts-area {
        padding: 56px 14px
    }

    .blg .quiz-band {
        padding: 56px 14px
    }
}

.aa-root {
    max-width: 1366px;
    margin: 0 auto;
    overflow-x: clip
}

.aa-root .top-band {
    height: 4px;
    background: linear-gradient(97deg, #FBFBFB, transparent);
    border-top: 2px solid #5677E8
}

.aa-root .opener {
    padding: 56px 56px 96px;
    background: #FBFBFB;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative
}

.aa-root .opener::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 48px;
    background: #fff;
    clip-path: ellipse(55% 100% at 50% 100%)
}

.aa-root .opener .eyebrow {
    font-size: 15px;
    line-height: 1.75;
    color: #5677E8;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px
}

.aa-root .opener .headline {
    font-size: 51px;
    line-height: 1.1;
    color: #1a2340;
    margin-bottom: 28px;
    background: linear-gradient(97deg, #5677E8, #D9B007);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.aa-root .opener .headline em {
    font-style: italic
}

.aa-root .opener .stat-row {
    display: flex;
    flex-direction: row;
    gap: 56px;
    margin-bottom: 56px;
    align-items: center
}

.aa-root .opener .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center
}

.aa-root .opener .stat-num {
    font-size: 37px;
    line-height: 1.1;
    color: #5677E8;
    font-weight: 700
}

.aa-root .opener .stat-label {
    font-size: 15px;
    line-height: 1.75;
    color: #4a5568
}

.aa-root .opener .stat-divider {
    width: 1px;
    height: 40px;
    background: #D9B007;
    opacity: .4
}

.aa-root .opener .img-frame {
    position: relative;
    width: 220px;
    height: 275px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 36px 0 #5677e81a;
    animation: aa-reveal .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

.aa-root .opener .img-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, #ffffff59 0%, transparent 60%);
    z-index: 1;
    pointer-events: none
}

.aa-root .opener .img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.aa-root .opener .img-frame:hover img {
    transform: scale(1.04)
}

.aa-root .opener .glow-ring {
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    border: 1.5px solid #5677e82e;
    pointer-events: none
}

@keyframes aa-reveal {
    from {
        clip-path: ellipse(0% 0% at 50% 50%);
        opacity: 0
    }

    to {
        clip-path: ellipse(100% 100% at 50% 50%);
        opacity: 1
    }
}

.aa-root .split-bio {
    padding: 96px 56px;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start
}

.aa-root .split-bio .bio-left {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.aa-root .split-bio .section-tag {
    font-size: 15px;
    line-height: 1.75;
    color: #D9B007;
    text-transform: uppercase;
    letter-spacing: .06em
}

.aa-root .split-bio .bio-h {
    font-size: 37px;
    line-height: 1.1;
    color: #1a2340;
    background: linear-gradient(97deg, #5677E8, #D9B007);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.aa-root .split-bio .bio-p {
    font-size: 17px;
    line-height: 1.75;
    color: #2d3a52;
    max-width: 520px
}

.aa-root .split-bio .bio-p em {
    font-style: italic;
    color: #5677E8;
    -webkit-text-fill-color: #5677E8
}

.aa-root .split-bio .bio-right {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.aa-root .split-bio .img-wide {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 25px 0 #5677e814
}

.aa-root .split-bio .img-wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.aa-root .split-bio .img-wide:hover img {
    transform: scale(1.03)
}

.aa-root .split-bio .pull-quote {
    font-size: 21px;
    line-height: 1.75;
    color: #5677E8;
    padding: 28px;
    border-radius: 6px;
    background: linear-gradient(97deg, #5677e80f, transparent);
    box-shadow: 0 1px 5px 0 #5677e812
}

.aa-root .perspective-band {
    padding: 96px 56px;
    background: linear-gradient(97deg, #5677e80d, #d9b0070a);
    position: relative;
    overflow: hidden
}

.aa-root .perspective-band .bg-abbr {
    position: absolute;
    top: -28px;
    right: 56px;
    font-size: 200px;
    line-height: 1.1;
    color: #5677e80a;
    font-weight: 900;
    pointer-events: none;
    user-select: none;
    z-index: 0
}

.aa-root .perspective-band .pb-inner {
    position: relative;
    z-index: 1
}

.aa-root .perspective-band .pb-head {
    font-size: 37px;
    line-height: 1.1;
    margin-bottom: 56px;
    background: linear-gradient(97deg, #5677E8, #D9B007);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 600px
}

.aa-root .perspective-band .pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px
}

.aa-root .perspective-band .pillar {
    background: #fff;
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 5px 25px 0 #5677e814;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), clip-path .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.aa-root .perspective-band .pillar:hover {
    box-shadow: 0 8px 36px 0 #5677e81a;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 2% 100%)
}

.aa-root .perspective-band .pillar .p-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(97deg, #5677e81f, #d9b00714);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.aa-root .perspective-band .pillar .p-icon i {
    color: #5677E8;
    font-size: 17px
}

.aa-root .perspective-band .pillar .p-title {
    font-size: 17px;
    line-height: 1.1;
    color: #1a2340;
    font-weight: 700
}

.aa-root .perspective-band .pillar .p-text {
    font-size: 15px;
    line-height: 1.75;
    color: #4a5568
}

.aa-root .perspective-band .img-pair {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 28px;
    margin-top: 56px
}

.aa-root .perspective-band .img-pair .img-slot {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 25px 0 #5677e814
}

.aa-root .perspective-band .img-pair .img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.aa-root .perspective-band .img-pair .img-slot:hover img {
    transform: scale(1.04)
}

.aa-root .perspective-band .img-pair .img-slot.tall {
    aspect-ratio: 16/9
}

.aa-root .perspective-band .img-pair .img-slot.short {
    aspect-ratio: 4/3
}

.aa-root .reach-strip {
    padding: 56px 56px 96px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px
}

.aa-root .reach-strip .divider-dec {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 600px
}

.aa-root .reach-strip .divider-dec .line {
    flex: 1;
    height: 1px;
    background: #5677e833
}

.aa-root .reach-strip .divider-dec .diamond {
    width: 8px;
    height: 8px;
    background: #D9B007;
    border-radius: 2px;
    transform: rotate(45deg);
    flex-shrink: 0
}

.aa-root .reach-strip .reach-h {
    font-size: 37px;
    line-height: 1.1;
    text-align: center;
    background: linear-gradient(97deg, #5677E8, #D9B007);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.aa-root .reach-strip .reach-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 56px;
    align-items: start;
    width: 100%
}

.aa-root .reach-strip .reach-img {
    aspect-ratio: 3/4;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 36px 0 #5677e81a
}

.aa-root .reach-strip .reach-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.aa-root .reach-strip .reach-img:hover img {
    transform: scale(1.03)
}

.aa-root .reach-strip .reach-text {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.aa-root .reach-strip .reach-p {
    font-size: 17px;
    line-height: 1.75;
    color: #2d3a52;
    max-width: 560px
}

.aa-root .reach-strip .disclosure-group {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.aa-root .reach-strip .disclosure-group .d-item {
    border-radius: 6px;
    background: #FBFBFB;
    box-shadow: 0 1px 5px 0 #5677e812;
    overflow: hidden
}

.aa-root .reach-strip .disclosure-group details {
    padding: 0
}

.aa-root .reach-strip .disclosure-group summary {
    font-size: 17px;
    line-height: 1.75;
    color: #1a2340;
    font-weight: 600;
    padding: 14px 28px;
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transition: color .5s ease, background .6s ease
}

.aa-root .reach-strip .disclosure-group summary::-webkit-details-marker {
    display: none
}

.aa-root .reach-strip .disclosure-group summary:hover {
    color: #5677E8;
    background: #5677e80a
}

.aa-root .reach-strip .disclosure-group summary .s-icon {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1.5px solid #5677e84d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .5s ease, border-color .5s ease
}

.aa-root .reach-strip .disclosure-group summary .s-icon i {
    font-size: 11px;
    color: #5677E8
}

.aa-root .reach-strip .disclosure-group details[open] summary .s-icon {
    background: #5677E8;
    border-color: #5677E8
}

.aa-root .reach-strip .disclosure-group details[open] summary .s-icon i {
    color: #fff
}

.aa-root .reach-strip .disclosure-group .d-body {
    padding: 0 28px 14px;
    font-size: 15px;
    line-height: 1.75;
    color: #4a5568
}

.aa-root .reach-strip .cta-pair {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex-wrap: wrap
}

.aa-root .reach-strip .btn-prim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 28px;
    background: #5677E8;
    color: #fff;
    font-size: 17px;
    line-height: 1.1;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 5px 25px 0 #5677e814;
    transition: box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), clip-path .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
    overflow: hidden
}

.aa-root .reach-strip .btn-prim:hover {
    box-shadow: 0 8px 36px 0 #5677e81a;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.aa-root .reach-strip .btn-prim::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff14;
    opacity: 0;
    transition: opacity .5s ease
}

.aa-root .reach-strip .btn-prim:hover::after {
    opacity: 1
}

.aa-root .reach-strip .btn-sec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 28px;
    background: transparent;
    color: #5677E8;
    font-size: 17px;
    line-height: 1.1;
    border-radius: 6px;
    border: 1.5px solid #5677e866;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .6s ease, background .6s ease, clip-path .5s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.aa-root .reach-strip .btn-sec:hover {
    border-color: #5677E8;
    background: #5677e80d;
    clip-path: polygon(2% 0, 100% 0, 100% 100%, 0 100%)
}

.aa-root .color-bleed {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #d9b0070f;
    pointer-events: none;
    animation: aa-bleed 8s ease infinite alternate;
    z-index: 0
}

@keyframes aa-bleed {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: .4
    }

    100% {
        transform: translate(40px, 30px) scale(1.15);
        opacity: .7
    }
}

@media (max-width: 900px) {
    .aa-root .opener .stat-row {
        gap: 28px
    }

    .aa-root .opener .headline {
        font-size: 37px
    }

    .aa-root .split-bio {
        grid-template-columns: 1fr;
        padding: 56px 28px
    }

    .aa-root .split-bio .bio-p {
        max-width: 100%
    }

    .aa-root .perspective-band {
        padding: 56px 28px
    }

    .aa-root .perspective-band .pillars {
        grid-template-columns: 1fr 1fr
    }

    .aa-root .perspective-band .img-pair {
        grid-template-columns: 1fr
    }

    .aa-root .reach-strip {
        padding: 56px 28px
    }

    .aa-root .reach-strip .reach-body {
        grid-template-columns: 1fr
    }

    .aa-root .reach-strip .reach-img {
        aspect-ratio: 16/9;
        border-radius: 6px
    }
}

@media (max-width: 600px) {
    .aa-root .opener {
        padding: 28px 14px 56px
    }

    .aa-root .opener .headline {
        font-size: 27px
    }

    .aa-root .opener .stat-row {
        flex-direction: column;
        gap: 14px
    }

    .aa-root .opener .stat-divider {
        width: 40px;
        height: 1px
    }

    .aa-root .perspective-band .pillars {
        grid-template-columns: 1fr
    }

    .aa-root .perspective-band .bg-abbr {
        font-size: 100px
    }

    .aa-root .reach-strip .cta-pair {
        flex-direction: column
    }

    .aa-root .split-bio {
        padding: 56px 14px
    }

    .aa-root .reach-strip {
        padding: 28px 14px 56px
    }
}

.pg-ok {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 96px 28px;
    background: #FBFBFB
}

.pg-ok .wrap {
    max-width: 560px;
    width: 100%;
    text-align: center
}

.pg-ok .icon-ring {
    width: 72px;
    height: 72px;
    margin: 0 auto 28px;
    border-radius: 20px;
    background: linear-gradient(97deg, #FBFBFB, transparent);
    border: 2px solid #5677E8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 25px 0 #5677e814;
    transition: clip-path .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: inset(0% round 20px)
}

.pg-ok .icon-ring:hover {
    clip-path: inset(3% round 6px)
}

.pg-ok .icon-ring svg {
    width: 32px;
    height: 32px;
    stroke: #5677E8;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.pg-ok .hdg {
    font-size: 37px;
    line-height: 1.1;
    color: #1b1b2e;
    margin: 0 0 14px;
    background: linear-gradient(97deg, #5677E8, #D9B007);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.pg-ok .sub {
    font-size: 17px;
    line-height: 1.75;
    color: #3a3a4a;
    margin: 0 0 56px
}

.pg-ok .sub em {
    font-style: italic;
    color: #5677E8;
    -webkit-text-fill-color: #5677E8
}

.pg-ok .divider {
    width: 48px;
    height: 2px;
    background: #D9B007;
    border-radius: 2px;
    margin: 0 auto 56px
}

.pg-ok .actions {
    display: flex;
    flex-direction: row;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap
}

.pg-ok .btn-pri {
    display: inline-block;
    padding: 14px 28px;
    background: #5677E8;
    color: #fff;
    font-size: 15px;
    line-height: 1.1;
    border-radius: 6px;
    text-decoration: none;
    border: 2px solid #5677E8;
    box-shadow: 0 5px 25px 0 #5677e814;
    transition: background .5s ease, box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), clip-path .7s ease;
    clip-path: inset(0% round 6px);
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.pg-ok .btn-pri:hover {
    background: #3d5ec9;
    box-shadow: 0 8px 36px 0 #5677e81a;
    clip-path: inset(2% round 2px)
}

.pg-ok .btn-pri:focus {
    outline: 2px solid #D9B007;
    outline-offset: 3px
}

.pg-ok .btn-sec {
    display: inline-block;
    padding: 14px 28px;
    background: transparent;
    color: #5677E8;
    font-size: 15px;
    line-height: 1.1;
    border-radius: 6px;
    text-decoration: none;
    border: 2px solid #5677E8;
    transition: color .5s ease, border-color .5s ease, clip-path .7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: inset(0% round 6px);
    cursor: pointer
}

.pg-ok .btn-sec:hover {
    color: #3d5ec9;
    border-color: #3d5ec9;
    clip-path: inset(2% round 2px)
}

.pg-ok .btn-sec:focus {
    outline: 2px solid #D9B007;
    outline-offset: 3px
}

.pg-ok .note {
    margin: 56px 0 0;
    padding: 14px 28px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 5px 0 #5677e812;
    font-size: 15px;
    line-height: 1.75;
    color: #3a3a4a
}

.pg-ok .note a {
    color: #5677E8;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .5s ease
}

.pg-ok .note a:hover {
    color: #D9B007
}

@media (max-width: 600px) {
    .pg-ok {
        padding: 56px 14px
    }

    .pg-ok .hdg {
        font-size: 27px
    }

    .pg-ok .actions {
        flex-direction: column;
        align-items: center
    }

    .pg-ok .btn-pri,
    .pg-ok .btn-sec {
        width: 100%;
        text-align: center
    }
}