* {
    box-sizing: border-box
}

body {
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh;
    font-family: "Open Sans", sans-serif
}

.top-strip {
    background: #551386;
    padding: 0 40px
}

.top-strip__inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
    min-height: 44px
}

.top-strip__notice {
    color: #F8FF9B;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.55
}

.top-strip__contact-group {
    align-items: center;
    display: flex;
    gap: 40px
}

.top-strip__phone,
.top-strip__email {
    color: #F8FF9B;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.55;
    text-decoration: none;
    transition: color .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.top-strip__phone:hover,
.top-strip__email:hover {
    color: #97FF14
}

.top-strip__phone:focus,
.top-strip__email:focus {
    box-shadow: 0 0 0 3px #97ff148c;
    outline: none;
    border-radius: 8px
}

.site-menu-bar {
    background: #fff;
    border-bottom: 2px solid #551386;
    padding: 0 40px
}

.site-menu-bar__inner {
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    max-width: 1200px
}

.site-menu-bar__list {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0
}

.site-menu-bar__item {
    display: flex;
    align-items: stretch
}

.site-menu-bar__link {
    align-items: center;
    color: #551386;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    padding: 16px;
    text-decoration: none;
    transition: color .35s ease-in-out, background-color .35s ease-in-out;
    white-space: nowrap
}

.site-menu-bar__link:hover {
    background-color: #F8FF9B;
    color: #551386
}

.site-menu-bar__link:focus {
    box-shadow: 0 0 0 3px #55138666;
    outline: none
}

.site-menu-bar__link.active {
    background-color: #97FF14;
    color: #551386
}

.brand-row {
    background: #fff;
    padding: 16px 40px;
    position: relative
}

.brand-row::after {
    background: linear-gradient(90deg, #97FF14 0%, #F8FF9B 60%, transparent 100%);
    bottom: 0;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%
}

.brand-row__inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px
}

.brand-identity {
    align-items: center;
    display: flex;
    gap: 16px;
    text-decoration: none
}

.brand-identity__logo-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: -1px 1px 6px 0 #5513860f -1px 4px 28px 0 #55138617;
    flex-shrink: 0;
    padding: 8px
}

.brand-identity__logo-box img {
    display: block;
    height: 55px;
    object-fit: contain;
    width: 55px
}

.brand-identity__name {
    color: #551386;
    font-size: 31px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2
}

.brand-tagline-box {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.brand-tagline-box__label {
    background: #97FF14;
    border-radius: 48px;
    color: #2a0060;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    padding: 8px 16px
}

.brand-tagline-box__sub {
    color: #551386;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.55;
    opacity: .75
}

@media (max-width: 1024px) {
    .top-strip {
        padding: 0 16px
    }

    .site-menu-bar {
        padding: 0 16px
    }

    .brand-row {
        padding: 16px
    }

    .site-menu-bar__link {
        font-size: 15px;
        padding: 16px 8px
    }

    .brand-identity__name {
        font-size: 31px
    }
}

@media (max-width: 768px) {
    .top-strip__contact-group {
        gap: 16px
    }

    .top-strip__notice {
        display: none
    }

    .brand-tagline-box {
        display: none
    }

    .brand-identity__name {
        font-size: 19px
    }

    .site-menu-bar__link {
        padding: 16px 8px;
        font-size: 15px
    }
}

@media (max-width: 480px) {
    .top-strip__contact-group {
        gap: 8px
    }

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

    .site-menu-bar__list {
        flex-wrap: wrap
    }

    .site-menu-bar__link {
        padding: 8px
    }
}

.site-footer {
    background: #551386;
    padding: 80px 40px 40px;
    position: relative
}

.site-footer::before {
    background: linear-gradient(90deg, #97FF14 0%, #F8FF9B 50%, #97FF14 100%);
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.site-footer__grid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    margin: 0 auto;
    max-width: 1200px
}

.footer-brand-block {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.footer-brand-block__logo-row {
    align-items: center;
    display: flex;
    gap: 16px
}

.footer-brand-block__logo-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: -1px 4px 28px 0 #97ff1417;
    flex-shrink: 0;
    padding: 8px
}

.footer-brand-block__logo-box img {
    display: block;
    height: 55px;
    object-fit: contain;
    width: 55px
}

.footer-brand-block__name {
    color: #F8FF9B;
    font-size: 31px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2
}

.footer-brand-block__description {
    color: #f8ff9bbf;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.55
}

.footer-brand-block__divider {
    background: #97ff144d;
    border: none;
    height: 1px;
    margin: 8px 0;
    width: 100%
}

.footer-brand-block__copyright {
    color: #f8ff9b8c;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.55
}

.footer-links-block {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.footer-links-block__heading {
    color: #97FF14;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    text-transform: uppercase
}

.footer-links-block__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0
}

.footer-links-block__link {
    color: #f8ff9bd9;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.55;
    text-decoration: none;
    transition: color .4s ease-in-out
}

.footer-links-block__link:hover {
    color: #97FF14
}

.footer-links-block__link:focus {
    box-shadow: 0 0 0 3px #97ff1480;
    border-radius: 8px;
    outline: none
}

.footer-contact-block {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.footer-contact-block__heading {
    color: #97FF14;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    text-transform: uppercase
}

.footer-contact-block__item {
    color: #f8ff9bd9;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.55
}

.footer-contact-block__link {
    color: #f8ff9bd9;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.55;
    text-decoration: none;
    transition: color .4s ease-in-out
}

.footer-contact-block__link:hover {
    color: #97FF14
}

.footer-contact-block__link:focus {
    box-shadow: 0 0 0 3px #97ff1480;
    border-radius: 8px;
    outline: none
}

.footer-contact-block__address {
    color: #f8ff9b99;
    font-size: 15px;
    font-style: normal;
    letter-spacing: .01em;
    line-height: 1.8
}

@media (max-width: 1024px) {
    .site-footer {
        padding: 80px 16px 40px
    }

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

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

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

    .site-footer {
        padding: 40px 16px
    }
}

.cookie-popup {
    background: #fff;
    border-radius: 12px;
    box-shadow: -1px 8px 36px 0 #5513861c;
    display: none;
    left: 0;
    margin: 0 auto;
    max-width: 480px;
    padding: 16px 40px 16px 16px;
    position: fixed;
    right: 0;
    top: 80px;
    width: calc(100% - 16px);
    z-index: 8000;
    transition: transform .22s cubic-bezier(0.34, 1.2, 0.64, 1), opacity .22s ease-in-out
}

.cookie-popup.visible {
    transform: translateY(0);
    opacity: 1
}

.cookie-popup.hidden-state {
    transform: translateY(-20px);
    opacity: 0
}

.cookie-popup__text {
    color: #2a0060;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.55;
    margin: 0 0 8px
}

.cookie-popup__description {
    color: #551386;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.55;
    margin: 0 0 16px;
    opacity: .8
}

.cookie-popup__actions {
    align-items: center;
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.cookie-popup__accept {
    background: transparent;
    border: 2px solid #551386;
    border-radius: 8px;
    color: #551386;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    min-height: 44px;
    padding: 8px 16px;
    transition: background-color .35s ease-in-out, color .35s ease-in-out, filter .35s ease-in-out
}

.cookie-popup__accept:hover {
    filter: brightness(1.12);
    background-color: #551386;
    color: #F8FF9B
}

.cookie-popup__accept:focus {
    box-shadow: 0 0 0 3px #55138666;
    outline: none
}

.cookie-popup__decline {
    background: transparent;
    border: none;
    color: #551386;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1.2;
    min-height: 44px;
    padding: 8px;
    text-decoration: underline;
    text-decoration-color: #55138666;
    transition: color .35s ease-in-out, text-decoration-color .35s ease-in-out
}

.cookie-popup__decline:hover {
    color: #2a0060;
    text-decoration-color: #2a0060
}

.cookie-popup__decline:focus {
    box-shadow: 0 0 0 3px #55138666;
    border-radius: 8px;
    outline: none
}

.content-policy {
    margin: 0 auto;
    max-width: 1200px;
    padding: 80px 40px
}

.content-policy h1 {
    font-size: 56px;
    letter-spacing: .01em;
    line-height: 1.2;
    margin-bottom: 40px;
    margin-top: 0
}

.content-policy h2 {
    font-size: 41px;
    letter-spacing: .01em;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 80px
}

.content-policy h3 {
    font-size: 31px;
    letter-spacing: .01em;
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 40px
}

.content-policy h4 {
    font-size: 19px;
    letter-spacing: .02em;
    line-height: 1.55;
    margin-bottom: 8px;
    margin-top: 40px
}

.content-policy h5 {
    font-size: 15px;
    letter-spacing: .02em;
    line-height: 1.55;
    margin-bottom: 8px;
    margin-top: 16px
}

.content-policy h6 {
    font-size: 15px;
    letter-spacing: .02em;
    line-height: 1.55;
    margin-bottom: 8px;
    margin-top: 16px;
    opacity: .72
}

.content-policy p {
    font-size: 19px;
    letter-spacing: .01em;
    line-height: 1.8;
    margin-bottom: 16px;
    margin-top: 0
}

.content-policy ul,
.content-policy ol {
    font-size: 19px;
    letter-spacing: .01em;
    line-height: 1.8;
    margin-bottom: 16px;
    margin-top: 0;
    padding-left: 40px
}

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

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

.content-policy li {
    margin-bottom: 8px
}

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

.content-policy ul ul,
.content-policy ol ol,
.content-policy ul ol,
.content-policy ol ul {
    margin-bottom: 8px;
    margin-top: 8px
}

.content-policy strong,
.content-policy b {
    font-weight: 700;
    letter-spacing: .01em
}

.content-policy em,
.content-policy i {
    font-style: italic
}

.content-policy hr {
    background-color: #551386;
    border: none;
    height: 1px;
    margin-bottom: 40px;
    margin-top: 40px;
    opacity: .14
}

@media (max-width: 1024px) {
    .content-policy {
        padding: 80px 40px
    }

    .content-policy h1 {
        font-size: 41px
    }

    .content-policy h2 {
        font-size: 31px
    }

    .content-policy h3 {
        font-size: 19px
    }
}

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

    .content-policy h1 {
        font-size: 31px;
        margin-bottom: 16px
    }

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

    .content-policy h3 {
        font-size: 15px;
        margin-top: 16px
    }

    .content-policy p,
    .content-policy ul,
    .content-policy ol {
        font-size: 15px
    }

    .content-policy ul,
    .content-policy ol {
        padding-left: 16px
    }
}

@media (max-width: 480px) {
    .content-policy {
        padding: 40px 8px
    }

    .content-policy h1 {
        font-size: 19px
    }

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

    .content-policy h3,
    .content-policy h4,
    .content-policy h5,
    .content-policy h6 {
        font-size: 15px;
        margin-top: 16px
    }
}

.guides-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px
}

.guides-detail .breadcrumb {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 40px
}

.guides-detail .breadcrumb__item {
    font-size: 15px;
    color: #444;
    text-decoration: none;
    letter-spacing: .01em
}

.guides-detail .breadcrumb__item:hover {
    color: #551386;
    text-decoration: underline;
    text-underline-offset: 4px
}

.guides-detail .breadcrumb__sep {
    display: inline-flex;
    align-items: center
}

.guides-detail .breadcrumb__sep svg {
    display: block
}

.guides-detail .breadcrumb__item.active {
    color: #551386;
    font-weight: 600;
    pointer-events: none
}

.guides-detail .article-layout {
    display: grid;
    grid-template-columns: 1fr 60%;
    gap: 80px;
    align-items: start;
    margin-bottom: 80px
}

.guides-detail .article-meta-col {
    position: sticky;
    top: 40px
}

.guides-detail .article-tag {
    display: inline-block;
    background: #551386;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 8px;
    margin-bottom: 16px
}

.guides-detail .article-category {
    display: inline-block;
    background: #F8FF9B;
    color: #2a0060;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    margin-left: 8px
}

.guides-detail .article-title-main {
    font-size: 41px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0040;
    margin: 16px 0
}

.guides-detail .article-title-main span {
    color: #551386
}

.guides-detail .article-subtitle {
    font-size: 19px;
    line-height: 1.55;
    color: #3d3d3d;
    letter-spacing: .01em;
    margin-bottom: 40px
}

.guides-detail .meta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px
}

.guides-detail .meta-date {
    font-size: 15px;
    color: #555;
    letter-spacing: .02em
}

.guides-detail .meta-readtime {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #555;
    letter-spacing: .02em
}

.guides-detail .meta-readtime svg {
    flex-shrink: 0
}

.guides-detail .meta-divider {
    width: 4px;
    height: 4px;
    border-radius: 48px;
    background: #97FF14;
    flex-shrink: 0
}

.guides-detail .copy-url-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid #551386;
    color: #551386;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .38s cubic-bezier(0.34, 1.2, 0.64, 1), color .38s cubic-bezier(0.34, 1.2, 0.64, 1);
    margin-bottom: 40px;
    position: relative
}

.guides-detail .copy-url-btn:hover {
    background: #551386;
    color: #fff;
    filter: brightness(1.08)
}

.guides-detail .copy-url-btn:focus {
    outline: 2px solid #97FF14;
    outline-offset: 2px
}

.guides-detail .copy-url-btn .copy-label-tooltip {
    display: none;
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: #1b0040;
    color: #fff;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: -1px 4px 28px 0 #55138617
}

.guides-detail .copy-url-btn:hover .copy-label-tooltip,
.guides-detail .copy-url-btn:focus .copy-label-tooltip {
    display: block
}

.guides-detail .article-image-wrapper {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    box-shadow: -1px 8px 36px 0 #5513861c;
    margin-bottom: 40px;
    position: relative
}

.guides-detail .article-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.guides-detail .image-texture-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
    pointer-events: none;
    border-radius: 12px
}

.guides-detail .article-body {
    font-size: 19px;
    line-height: 1.8;
    color: #1b0040;
    letter-spacing: .01em
}

.guides-detail .article-body p {
    margin-bottom: 16px
}

.guides-detail .article-body h2 {
    font-size: 31px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1b0040;
    margin: 40px 0 16px
}

.guides-detail .article-body strong {
    color: #551386;
    font-weight: 700
}

.guides-detail .article-body del {
    color: #999;
    text-decoration: line-through
}

.guides-detail .article-body ul {
    list-style: none;
    padding: 0;
    margin: 16px 0
}

.guides-detail .article-body ul li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 19px;
    line-height: 1.55
}

.guides-detail .article-body ul li::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 12px;
    margin-top: 6px;
    flex-shrink: 0;
    border-right: 2px solid #97FF14;
    border-bottom: 2px solid #97FF14;
    transform: rotate(-45deg) translateY(-2px)
}

.guides-detail .article-body ol {
    padding-left: 40px;
    margin: 16px 0
}

.guides-detail .article-body ol li {
    margin-bottom: 8px;
    font-size: 19px;
    line-height: 1.55
}

.guides-detail .article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;
    font-size: 15px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: -1px 4px 28px 0 #55138617
}

.guides-detail .article-body thead {
    background: #551386;
    color: #fff
}

.guides-detail .article-body thead td,
.guides-detail .article-body thead th {
    padding: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase
}

.guides-detail .article-body tr:nth-child(even) {
    background: #f4f0fa
}

.guides-detail .article-body tr:nth-child(odd) {
    background: #fff
}

.guides-detail .article-body td {
    padding: 16px;
    border-bottom: 1px solid #e8dff5;
    line-height: 1.55
}

.guides-detail .article-body time {
    font-size: 15px;
    color: #551386;
    font-weight: 600
}

.guides-detail .donut-block {
    background: #1b0040;
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin: 80px 0;
    box-shadow: -1px 8px 36px 0 #5513861c;
    position: relative;
    overflow: hidden
}

.guides-detail .donut-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n2)' opacity='0.07'/%3E%3C/svg%3E");
    pointer-events: none;
    border-radius: 12px
}

.guides-detail .donut-chart-wrap {
    flex-shrink: 0;
    position: relative;
    width: 120px;
    height: 120px
}

.guides-detail .donut-chart-wrap svg {
    display: block
}

.guides-detail .donut-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.guides-detail .donut-label-num {
    font-size: 19px;
    font-weight: 800;
    color: #97FF14;
    line-height: 1.2;
    letter-spacing: .01em
}

.guides-detail .donut-label-sub {
    font-size: 15px;
    color: #F8FF9B;
    line-height: 1.2
}

.guides-detail .donut-text-col {
    flex: 1;
    position: relative;
    z-index: 1
}

.guides-detail .donut-text-col h4 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #F8FF9B;
    margin-bottom: 8px
}

.guides-detail .donut-text-col p {
    font-size: 15px;
    line-height: 1.55;
    color: #d5c6f0;
    margin: 0
}

.guides-detail .change-arrow-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 16px
}

.guides-detail .change-num {
    font-size: 31px;
    font-weight: 800;
    color: #97FF14;
    letter-spacing: .01em;
    line-height: 1.2
}

.guides-detail .change-arrow {
    display: flex;
    align-items: center
}

.guides-detail .change-num-end {
    font-size: 31px;
    font-weight: 800;
    color: #F8FF9B;
    letter-spacing: .01em;
    line-height: 1.2
}

.guides-detail .brace-section {
    background: linear-gradient(180deg, #97FF14 0%, #fff 100%);
    border-radius: 12px;
    padding: 80px 40px;
    margin: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.guides-detail .brace-outer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    max-width: 800px;
    width: 100%
}

.guides-detail .brace-sym {
    font-size: 70px;
    line-height: 1.2;
    color: #551386;
    font-weight: 100;
    flex-shrink: 0;
    margin-top: -8px;
    letter-spacing: -.04em
}

.guides-detail .brace-body {
    flex: 1
}

.guides-detail .brace-body h3 {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1b0040;
    margin-bottom: 16px;
    line-height: 1.2
}

.guides-detail .brace-body p {
    font-size: 19px;
    line-height: 1.55;
    color: #2a0060;
    margin-bottom: 16px
}

.guides-detail .brace-body a {
    color: #551386;
    text-underline-offset: 6px;
    text-decoration: underline;
    font-weight: 600;
    transition: color .35s ease-in-out
}

.guides-detail .brace-body a:hover {
    color: #1b0040
}

.guides-detail .brace-sym-right {
    font-size: 70px;
    line-height: 1.2;
    color: #551386;
    font-weight: 100;
    flex-shrink: 0;
    margin-top: -8px;
    letter-spacing: -.04em;
    align-self: flex-end
}

.guides-detail .gradient-band {
    height: 8px;
    border-radius: 48px;
    background: linear-gradient(90deg, #97FF14 0%, #551386 100%);
    margin: 80px 0;
    width: 100%
}

@media (max-width: 1024px) {
    .guides-detail .article-layout {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .guides-detail .article-meta-col {
        position: static
    }

    .guides-detail .article-title-main {
        font-size: 31px
    }
}

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

    .guides-detail .donut-block {
        flex-direction: column;
        padding: 40px 16px
    }

    .guides-detail .brace-outer {
        flex-direction: column;
        gap: 16px
    }

    .guides-detail .brace-sym,
    .guides-detail .brace-sym-right {
        font-size: 41px
    }

    .guides-detail .article-body h2 {
        font-size: 19px
    }
}

@media (max-width: 480px) {
    .guides-detail .article-title-main {
        font-size: 19px
    }

    .guides-detail .meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .guides-detail .brace-section {
        padding: 40px 16px
    }
}

.about-us-page {
    max-width: 100%;
    overflow-x: hidden
}

.about-us-page .page-bound {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px
}

.about-us-page .double-border {
    border: 1px solid #5513862e;
    outline: 3px solid #97ff1421;
    outline-offset: 4px
}

@keyframes brightness-pulse {

    0%,
    100% {
        filter: brightness(1)
    }

    50% {
        filter: brightness(1.04)
    }
}

.about-us-page .photo-dim {
    filter: brightness(0.82) grayscale(1);
    transition: filter .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.about-us-page .photo-dim:hover {
    filter: brightness(1.05) grayscale(1)
}

.about-us-page .photo-color {
    filter: brightness(0.82);
    transition: filter .42s ease-in-out
}

.about-us-page .photo-color:hover {
    filter: brightness(1.06)
}

.about-us-page .wave-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0
}

.about-us-page .wave-divider svg {
    display: block;
    width: 100%
}

.about-us-page .stripe-hover {
    position: relative;
    overflow: hidden
}

.about-us-page .stripe-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 4px;
    height: 100%;
    background: #97FF14;
    transition: left .35s cubic-bezier(0.34, 1.2, 0.64, 1);
    z-index: 1;
    pointer-events: none
}

.about-us-page .stripe-hover:hover::before {
    left: 0
}

.about-us-page .tag-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #551386;
    background: #F8FF9B;
    padding: 8px 16px;
    border-radius: 8px;
    margin-bottom: 16px
}

.about-us-page .link-styled {
    color: #551386;
    text-decoration-line: underline;
    text-underline-offset: 5px;
    transition: color .33s ease-in-out
}

.about-us-page .link-styled:hover {
    color: #97FF14
}

.about-us-page .btn-primary {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #1b0033;
    background: #97FF14;
    padding: 16px 40px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: filter .36s cubic-bezier(0.34, 1.2, 0.64, 1);
    box-shadow: -1px 4px 28px 0 #97ff1417
}

.about-us-page .btn-primary:hover {
    filter: brightness(1.12)
}

.about-us-page .btn-primary:focus {
    outline: 3px solid #551386;
    outline-offset: 3px
}

.about-us-page .btn-secondary {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #551386;
    background: transparent;
    padding: 16px 40px;
    border-radius: 8px;
    border: 2px solid #551386;
    text-decoration: none;
    cursor: pointer;
    transition: filter .38s ease-in-out, background .38s ease-in-out
}

.about-us-page .btn-secondary:hover {
    filter: brightness(1.1);
    background: #55138612
}

.about-us-page .btn-secondary:focus {
    outline: 3px solid #97FF14;
    outline-offset: 3px
}

.about-us-page .arrow-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.about-us-page .arrow-list li {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 15px;
    line-height: 1.55;
    color: #2a0a40
}

.about-us-page .arrow-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-top: 2px solid #551386;
    border-right: 2px solid #551386;
    transform: translateY(-50%) rotate(45deg)
}

.about-us-page .two-tone {
    color: #1b0033
}

.about-us-page .two-tone .accent {
    color: #551386
}

.about-us-page .meta-text {
    font-size: 15px;
    color: #4a2070;
    line-height: 1.55;
    letter-spacing: .01em
}

.about-us-page .body-text {
    font-size: 19px;
    line-height: 1.55;
    color: #2a0a40;
    letter-spacing: .01em
}

.about-us-page .small-text {
    font-size: 15px;
    line-height: 1.55;
    color: #4a2070;
    letter-spacing: .01em
}

.about-us-page .title-block {
    background: #fff;
    padding: 80px 0 0
}

.about-us-page .title-block .page-bound {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 40px;
    min-height: 480px
}

.about-us-page .title-block .left-zone {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0;
    position: relative
}

.about-us-page .title-block .corner-lines {
    position: absolute;
    top: 40px;
    left: 0;
    width: 60px;
    height: 60px;
    pointer-events: none
}

.about-us-page .title-block .corner-lines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #97FF14
}

.about-us-page .title-block .corner-lines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 40px;
    background: #97FF14
}

.about-us-page .title-block .right-zone {
    flex: 0 0 520px;
    position: relative;
    display: flex;
    align-items: stretch
}

.about-us-page .title-block .right-zone .image-frame {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: -1px 8px 36px 0 #5513861c
}

.about-us-page .title-block .right-zone .image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 16/9
}

.about-us-page .title-block .right-zone .corner-tr {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 60px;
    height: 60px;
    pointer-events: none
}

.about-us-page .title-block .right-zone .corner-tr::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 2px;
    background: #551386
}

.about-us-page .title-block .right-zone .corner-tr::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 40px;
    background: #551386
}

.about-us-page .title-block h1 {
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: .01em;
    font-weight: 800;
    color: #1b0033;
    margin: 16px 0
}

.about-us-page .title-block h1 .accent {
    color: #551386
}

.about-us-page .title-block .subtitle {
    font-size: 19px;
    line-height: 1.55;
    color: #4a2070;
    letter-spacing: .01em;
    max-width: 380px;
    margin-bottom: 40px
}

.about-us-page .wave-sep {
    background: #fff;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0
}

.about-us-page .split-who {
    background: #551386;
    animation: brightness-pulse 5s ease-in-out infinite;
    padding: 80px 0
}

.about-us-page .split-who .page-bound {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center
}

.about-us-page .split-who .sidebar {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start
}

.about-us-page .split-who .sidebar .icon-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.about-us-page .split-who .sidebar .icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    background: #97ff142e;
    display: flex;
    align-items: center;
    justify-content: center
}

.about-us-page .split-who .sidebar .icon-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #F8FF9B;
    text-align: center
}

.about-us-page .split-who .main-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.about-us-page .split-who .text-group {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.about-us-page .split-who h2 {
    font-size: 41px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    margin: 0
}

.about-us-page .split-who h2 .accent {
    color: #97FF14
}

.about-us-page .split-who .body-light {
    font-size: 19px;
    line-height: 1.55;
    color: #f8ff9be0;
    letter-spacing: .01em;
    max-width: 600px
}

.about-us-page .split-who .image-col {
    flex: 0 0 360px
}

.about-us-page .split-who .image-col .image-frame {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: -1px 8px 36px 0 #97ff141c
}

.about-us-page .split-who .image-col .image-frame img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.about-us-page .wavy-dots {
    width: 100%;
    text-align: center;
    padding: 16px 0;
    background: #f3f0f8;
    overflow: hidden
}

.about-us-page .wavy-dots .dot-wave {
    display: block;
    width: 100%;
    height: 16px
}

.about-us-page .approach-section {
    background: #f3f0f8;
    padding: 80px 0
}

.about-us-page .approach-section .page-bound {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.about-us-page .approach-section .top-row {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-end
}

.about-us-page .approach-section .top-row .heading-group {
    flex: 1 1 auto
}

.about-us-page .approach-section h2 {
    font-size: 41px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #1b0033;
    margin: 8px 0 0
}

.about-us-page .approach-section h2 .accent {
    color: #551386
}

.about-us-page .approach-section .description {
    font-size: 19px;
    line-height: 1.55;
    color: #4a2070;
    max-width: 520px;
    margin-top: 16px
}

.about-us-page .pricing-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.about-us-page .pricing-table .plan-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: -1px 4px 28px 0 #55138617;
    position: relative
}

.about-us-page .pricing-table .plan-card.featured {
    background: #551386;
    box-shadow: -1px 8px 36px 0 #5513861c
}

.about-us-page .pricing-table .plan-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #551386;
    margin: 0
}

.about-us-page .pricing-table .plan-card.featured .plan-name {
    color: #F8FF9B
}

.about-us-page .pricing-table .plan-price {
    font-size: 41px;
    font-weight: 800;
    line-height: 1.2;
    color: #1b0033;
    letter-spacing: .01em
}

.about-us-page .pricing-table .plan-card.featured .plan-price {
    color: #97FF14
}

.about-us-page .pricing-table .plan-price span {
    font-size: 19px;
    font-weight: 400;
    color: #4a2070
}

.about-us-page .pricing-table .plan-card.featured .plan-price span {
    color: #f8ff9bb3
}

.about-us-page .pricing-table .plan-desc {
    font-size: 15px;
    line-height: 1.55;
    color: #4a2070
}

.about-us-page .pricing-table .plan-card.featured .plan-desc {
    color: #f8ff9bd9
}

.about-us-page .pricing-table .plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.about-us-page .pricing-table .plan-features li {
    font-size: 15px;
    line-height: 1.55;
    color: #2a0a40;
    padding-left: 20px;
    position: relative
}

.about-us-page .pricing-table .plan-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #97FF14;
    border-right: 2px solid #97FF14;
    transform: rotate(45deg)
}

.about-us-page .pricing-table .plan-card.featured .plan-features li {
    color: #fff
}

.about-us-page .pricing-table .plan-card.featured .plan-features li::before {
    border-color: #97FF14
}

.about-us-page .pricing-table .divider-line {
    border: none;
    border-top: 1px solid #5513861f;
    margin: 8px 0
}

.about-us-page .pricing-table .plan-card.featured .divider-line {
    border-top-color: #97ff1433
}

.about-us-page .wavy-dots-2 {
    background: #f3f0f8;
    width: 100%;
    overflow: hidden;
    padding: 8px 0 0
}

.about-us-page .team-contact {
    background: #fff;
    padding: 80px 0
}

.about-us-page .team-contact .page-bound {
    display: flex;
    flex-direction: column;
    gap: 80px
}

.about-us-page .team-contact .team-row {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start
}

.about-us-page .team-contact .team-image {
    flex: 0 0 480px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: -1px 4px 28px 0 #55138617
}

.about-us-page .team-contact .team-image img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.about-us-page .team-contact .team-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px
}

.about-us-page .team-contact h2 {
    font-size: 41px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #1b0033;
    margin: 0
}

.about-us-page .team-contact h2 .accent {
    color: #551386
}

.about-us-page .team-contact .para {
    font-size: 19px;
    line-height: 1.55;
    color: #2a0a40;
    letter-spacing: .01em;
    max-width: 440px
}

.about-us-page .team-contact .member-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px
}

.about-us-page .team-contact .member-card {
    background: #f3f0f8;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.about-us-page .team-contact .member-name {
    font-size: 15px;
    font-weight: 700;
    color: #1b0033;
    letter-spacing: .02em;
    margin: 0
}

.about-us-page .team-contact .member-role {
    font-size: 15px;
    color: #551386;
    letter-spacing: .01em;
    margin: 0
}

.about-us-page .team-contact .member-note {
    font-size: 15px;
    color: #4a2070;
    line-height: 1.55;
    margin: 0
}

.about-us-page .contact-invite {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    background: linear-gradient(to top, #97FF14, #fff);
    border-radius: 12px;
    padding: 40px;
    box-shadow: -1px 1px 6px 0 #97ff140f
}

.about-us-page .contact-invite .invite-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.about-us-page .contact-invite h3 {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #1b0033;
    margin: 0;
    line-height: 1.2
}

.about-us-page .contact-invite h3 .accent {
    color: #551386
}

.about-us-page .contact-invite .invite-desc {
    font-size: 19px;
    line-height: 1.55;
    color: #2a0a40;
    letter-spacing: .01em
}

.about-us-page .contact-invite .invite-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end
}

@media (max-width: 1024px) {
    .about-us-page .title-block .right-zone {
        flex: 0 0 400px
    }

    .about-us-page .split-who .image-col {
        flex: 0 0 280px
    }

    .about-us-page .team-contact .team-image {
        flex: 0 0 360px
    }
}

@media (max-width: 768px) {
    .about-us-page .page-bound {
        padding: 0 16px
    }

    .about-us-page .title-block .page-bound {
        flex-direction: column
    }

    .about-us-page .title-block h1 {
        font-size: 41px
    }

    .about-us-page .title-block .right-zone {
        flex: 0 0 auto;
        width: 100%
    }

    .about-us-page .split-who .page-bound {
        flex-direction: column
    }

    .about-us-page .split-who .sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        flex: 0 0 auto
    }

    .about-us-page .split-who .image-col {
        flex: 0 0 auto;
        width: 100%
    }

    .about-us-page .approach-section .top-row {
        flex-direction: column;
        align-items: flex-start
    }

    .about-us-page .pricing-table {
        grid-template-columns: 1fr
    }

    .about-us-page .team-contact .team-row {
        flex-direction: column
    }

    .about-us-page .team-contact .team-image {
        flex: 0 0 auto;
        width: 100%
    }

    .about-us-page .contact-invite {
        flex-direction: column;
        align-items: flex-start
    }

    .about-us-page .contact-invite .invite-actions {
        align-items: flex-start
    }

    .about-us-page .team-contact .member-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 480px) {
    .about-us-page .title-block h1 {
        font-size: 31px
    }

    .about-us-page .split-who h2,
    .about-us-page .approach-section h2,
    .about-us-page .team-contact h2 {
        font-size: 31px
    }

    .about-us-page .title-block {
        padding: 40px 0 0
    }

    .about-us-page .split-who,
    .about-us-page .approach-section,
    .about-us-page .team-contact {
        padding: 40px 0
    }

    .about-us-page .team-contact .page-bound {
        gap: 40px
    }
}

.consultation {
    background: #fff;
    overflow-x: clip;
    position: relative
}

.consultation .service-split {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.consultation .service-split__image-area {
    position: relative
}

.consultation .service-split__image-clip {
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16/9;
    box-shadow: -1px 8px 36px 0 #97ff141c
}

.consultation .service-split__image-clip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.6);
    transition: filter .38s cubic-bezier(0.34, 1.2, 0.64, 1);
    display: block
}

.consultation .service-split__image-clip:hover img {
    filter: saturate(1)
}

.consultation .service-split__image-blur {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(ellipse at 20% 80%, #ffffff2e 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, #ffffff2e 0%, transparent 60%);
    pointer-events: none
}

.consultation .service-split__text {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.consultation .service-split__label {
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #551386
}

.consultation .service-split__heading {
    font-size: 41px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .01em;
    color: #1a0033;
    margin: 0
}

.consultation .service-split__heading span {
    color: #551386
}

.consultation .service-split__body {
    font-size: 19px;
    line-height: 1.55;
    color: #2d1a44;
    margin: 0;
    letter-spacing: .01em;
    max-width: 480px
}

.consultation .service-split__note {
    font-size: 15px;
    line-height: 1.55;
    color: #4a3060;
    margin: 0;
    letter-spacing: .01em
}

.consultation .service-split__actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap
}

.consultation .btn-primary {
    background: #551386;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 16px 40px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: brightness .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.consultation .btn-primary:hover {
    filter: brightness(1.22)
}

.consultation .btn-primary:focus {
    outline: 3px solid #97FF14;
    outline-offset: 3px
}

.consultation .btn-secondary {
    background: transparent;
    color: #551386;
    border: 2px solid #551386;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 14px 40px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .4s ease-in-out, color .4s ease-in-out
}

.consultation .btn-secondary:hover {
    background: #551386;
    color: #fff
}

.consultation .btn-secondary:focus {
    outline: 3px solid #97FF14;
    outline-offset: 3px
}

.consultation .scallop-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background: #fff
}

.consultation .scallop-divider svg {
    display: block;
    width: 100%
}

.consultation .faq-band {
    background: linear-gradient(0deg, #fff 0%, #F8FF9B 55%, #fff 100%);
    position: relative
}

.consultation .faq-band__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px
}

.consultation .faq-band__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start
}

.consultation .faq-band__left {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.consultation .faq-band__label {
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #551386
}

.consultation .faq-band__heading {
    font-size: 41px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .01em;
    color: #1a0033;
    margin: 0
}

.consultation .faq-band__heading span {
    color: #97FF14;
    -webkit-text-stroke: 1px #551386
}

.consultation .faq-band__sub {
    font-size: 19px;
    line-height: 1.55;
    color: #2d1a44;
    margin: 0;
    letter-spacing: .01em
}

.consultation .faq-band__image-wrap {
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16/9;
    box-shadow: -1px 4px 28px 0 #55138617
}

.consultation .faq-band__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.6);
    transition: filter .42s cubic-bezier(0.34, 1.2, 0.64, 1);
    display: block
}

.consultation .faq-band__image-wrap:hover img {
    filter: saturate(1)
}

.consultation .faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 40px
}

.consultation .faq-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: -1px 1px 6px 0 #5513860f;
    overflow: hidden
}

.consultation .faq-item__toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: 16px 40px 16px 16px;
    cursor: pointer;
    gap: 16px;
    position: relative;
    text-align: left
}

.consultation .faq-item__toggle:focus {
    outline: 3px solid #97FF14;
    outline-offset: -3px
}

.consultation .faq-item__question {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1a0033
}

.consultation .faq-item__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center
}

.consultation .faq-item__arrow svg {
    transition: transform .35s cubic-bezier(0.34, 1.2, 0.64, 1);
    display: block
}

.consultation .faq-item__body {
    display: none;
    padding: 0 16px 16px
}

.consultation .faq-item__body p {
    font-size: 15px;
    line-height: 1.8;
    color: #2d1a44;
    margin: 0;
    letter-spacing: .01em
}

.consultation .faq-item.open .faq-item__body {
    display: block
}

.consultation .faq-item.open .faq-item__arrow svg {
    transform: rotate(180deg)
}

.consultation .circles-deco {
    position: absolute;
    top: 40px;
    right: 0;
    width: 320px;
    height: 320px;
    pointer-events: none;
    overflow: hidden
}

.consultation .circles-deco span {
    position: absolute;
    border-radius: 48px;
    border: 1.5px solid #55138614;
    animation: driftBg 7s ease-in-out infinite alternate
}

.consultation .circles-deco span:nth-child(1) {
    width: 200px;
    height: 200px;
    top: 20px;
    right: 20px;
    animation-delay: 0s
}

.consultation .circles-deco span:nth-child(2) {
    width: 140px;
    height: 140px;
    top: 60px;
    right: 60px;
    animation-delay: 1.5s
}

.consultation .circles-deco span:nth-child(3) {
    width: 90px;
    height: 90px;
    top: 95px;
    right: 95px;
    animation-delay: 3s;
    background: #97ff1412
}

@keyframes driftBg {
    0% {
        transform: translate(0, 0);
        opacity: .6
    }

    100% {
        transform: translate(-12px, 16px);
        opacity: 1
    }
}

@media (max-width: 1024px) {
    .consultation .service-split {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 80px 40px
    }

    .consultation .faq-band__top {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .consultation .faq-band__heading {
        font-size: 31px
    }

    .consultation .service-split__heading {
        font-size: 31px
    }
}

@media (max-width: 768px) {
    .consultation .service-split {
        padding: 80px 16px;
        gap: 40px
    }

    .consultation .faq-band__inner {
        padding: 80px 16px
    }

    .consultation .service-split__heading {
        font-size: 31px
    }

    .consultation .faq-band__heading {
        font-size: 31px
    }

    .consultation .service-split__body {
        font-size: 15px
    }

    .consultation .faq-item__question {
        font-size: 15px
    }

    .consultation .service-split__actions {
        flex-direction: column;
        align-items: flex-start
    }
}

@media (max-width: 480px) {
    .consultation .service-split {
        padding: 40px 16px
    }

    .consultation .faq-band__inner {
        padding: 40px 16px
    }

    .consultation .service-split__heading {
        font-size: 31px
    }

    .consultation .circles-deco {
        display: none
    }
}

.contact-us-page {
    max-width: 100%;
    overflow-x: hidden
}

.contact-us-page .contact-us-page__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px
}

.contact-us-page .reach-block {
    background: #fff;
    padding: 80px 40px
}

.contact-us-page .reach-block__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start
}

.contact-us-page .reach-block__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #551386;
    margin-bottom: 16px;
    display: block
}

.contact-us-page .reach-block__heading {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0a2e;
    margin: 0 0 40px
}

.contact-us-page .reach-block__heading em {
    font-style: normal;
    color: #97FF14;
    -webkit-text-stroke: 1px #551386
}

.contact-us-page .reach-block__decoration {
    width: 48px;
    height: 4px;
    background: linear-gradient(to right, #97FF14, #551386);
    border-radius: 8px;
    margin-bottom: 40px
}

.contact-us-page .reach-block__description {
    font-size: 19px;
    line-height: 1.55;
    letter-spacing: .01em;
    color: #2a1040;
    margin: 0 0 40px
}

.contact-us-page .contact-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.contact-us-page .contact-detail-list__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #f3f0fa;
    box-shadow: -1px 1px 6px 0 #5513860f;
    transition: box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1), background .35s ease-in-out;
    position: relative
}

.contact-us-page .contact-detail-list__item:hover {
    background: #F8FF9B;
    box-shadow: -1px 4px 28px 0 #55138617
}

.contact-us-page .contact-detail-list__item:hover .item-hover-label {
    opacity: 1;
    transform: translateY(0)
}

.contact-us-page .item-hover-label {
    position: absolute;
    top: -28px;
    right: 16px;
    font-size: 15px;
    font-weight: 600;
    color: #551386;
    background: #F8FF9B;
    padding: 4px 8px;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .32s ease-in-out, transform .32s cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: -1px 1px 6px 0 #5513860f
}

.contact-us-page .contact-detail-list__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #551386;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.contact-us-page .contact-detail-list__icon svg {
    fill: #97FF14
}

.contact-us-page .contact-detail-list__meta {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.contact-us-page .contact-detail-list__caption {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #551386
}

.contact-us-page .contact-detail-list__value {
    font-size: 19px;
    line-height: 1.55;
    color: #1b0a2e;
    letter-spacing: .01em
}

.contact-us-page .contact-detail-list__value a {
    color: #1b0a2e;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color .35s ease-in-out
}

.contact-us-page .contact-detail-list__value a:hover {
    color: #551386
}

.contact-us-page .reach-block__image-frame {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: -1px 8px 36px 0 #5513861c;
    aspect-ratio: 16/9;
    position: relative
}

.contact-us-page .reach-block__image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(0.3) contrast(1.1) brightness(0.92) saturate(0.8)
}

.contact-us-page .reach-block__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #55138673, transparent 60%);
    border-radius: 12px
}

.contact-us-page .reach-block__quote-mark {
    position: absolute;
    bottom: 16px;
    left: 16px;
    font-size: 70px;
    font-weight: 900;
    color: #97FF14;
    opacity: .55;
    line-height: 1;
    pointer-events: none;
    user-select: none
}

.contact-us-page .reach-block__image-caption {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 15px;
    color: #F8FF9B;
    font-weight: 600;
    letter-spacing: .02em
}

.contact-us-page .form-block {
    background: linear-gradient(to top, #97FF14 0%, #fff 100%);
    padding: 80px 40px
}

.contact-us-page .form-block__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    align-items: start
}

.contact-us-page .form-block__aside {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.contact-us-page .form-block__aside-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #551386
}

.contact-us-page .form-block__aside-heading {
    font-size: 41px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0a2e;
    margin: 0
}

.contact-us-page .form-block__aside-heading strong {
    color: #551386
}

.contact-us-page .form-block__aside-text {
    font-size: 19px;
    line-height: 1.55;
    color: #2a1040;
    margin: 0;
    letter-spacing: .01em
}

.contact-us-page .stroke-decoration {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start
}

.contact-us-page .stroke-decoration__line {
    height: 3px;
    background: #551386;
    border-radius: 48px;
    opacity: .18
}

.contact-us-page .stroke-decoration__line:nth-child(1) {
    width: 48px
}

.contact-us-page .stroke-decoration__line:nth-child(2) {
    width: 32px
}

.contact-us-page .stroke-decoration__line:nth-child(3) {
    width: 40px
}

.contact-us-page .stroke-decoration__line:nth-child(4) {
    width: 24px
}

.contact-us-page .contact-form {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: -1px 4px 28px 0 #55138617;
    display: flex;
    flex-direction: column;
    gap: 16px
}

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

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

.contact-us-page .form-field.full {
    grid-column: 1 / -1
}

.contact-us-page .form-field__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #1b0a2e
}

.contact-us-page .form-field__label span {
    color: #551386
}

.contact-us-page .form-field__input {
    height: 48px;
    padding: 0 16px;
    border: 2px solid #e2d8f0;
    border-radius: 8px;
    font-size: 19px;
    color: #1b0a2e;
    background: #fff;
    letter-spacing: .01em;
    outline: none;
    transition: border-color .35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .38s ease-in-out;
    width: 100%;
    box-sizing: border-box
}

.contact-us-page .form-field__input::placeholder {
    color: #55138659
}

.contact-us-page .form-field__input:focus {
    border-color: #551386;
    box-shadow: -1px 1px 6px 0 #5513860f
}

.contact-us-page .form-field__select {
    height: 48px;
    padding: 0 16px;
    border: 2px solid #e2d8f0;
    border-radius: 8px;
    font-size: 19px;
    color: #1b0a2e;
    background: #fff;
    letter-spacing: .01em;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23551386' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
    transition: border-color .35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .38s ease-in-out;
    width: 100%;
    box-sizing: border-box
}

.contact-us-page .form-field__select:focus {
    border-color: #551386;
    box-shadow: -1px 1px 6px 0 #5513860f
}

.contact-us-page .radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.contact-us-page .radio-group__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #1b0a2e;
    margin-bottom: 8px;
    display: block
}

.contact-us-page .radio-group__label span {
    color: #551386
}

.contact-us-page .radio-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px
}

.contact-us-page .radio-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 48px;
    border: 2px solid #e2d8f0;
    transition: border-color .4s cubic-bezier(0.34, 1.2, 0.64, 1), background .35s ease-in-out
}

.contact-us-page .radio-option:hover {
    border-color: #97FF14;
    background: #F8FF9B
}

.contact-us-page .radio-option input[type="radio"] {
    accent-color: #551386;
    width: 16px;
    height: 16px;
    cursor: pointer
}

.contact-us-page .radio-option__text {
    font-size: 15px;
    color: #1b0a2e;
    letter-spacing: .01em
}

.contact-us-page .privacy-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #f3f0fa;
    border-radius: 8px
}

.contact-us-page .privacy-row__checkbox {
    accent-color: #551386;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer
}

.contact-us-page .privacy-row__text {
    font-size: 15px;
    line-height: 1.55;
    color: #2a1040;
    letter-spacing: .01em
}

.contact-us-page .privacy-row__text a {
    color: #551386;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color .35s ease-in-out
}

.contact-us-page .privacy-row__text a:hover {
    color: #1b0a2e
}

.contact-us-page .submit-btn {
    align-self: flex-start;
    padding: 16px 40px;
    background: #551386;
    color: #97FF14;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: brightness .38s ease-in-out, box-shadow .4s cubic-bezier(0.34, 1.2, 0.64, 1);
    box-shadow: -1px 4px 28px 0 #55138617;
    outline: none
}

.contact-us-page .submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: border-color .4s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.contact-us-page .submit-btn:hover {
    filter: brightness(1.15);
    box-shadow: -1px 8px 36px 0 #5513861c
}

.contact-us-page .submit-btn:hover::before {
    border-color: #97FF14
}

.contact-us-page .submit-btn:focus {
    outline: 2px solid #97FF14;
    outline-offset: 3px
}

.contact-us-page .submit-btn:active {
    filter: brightness(0.95)
}

.contact-us-page .zigzag-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    display: block
}

.contact-us-page .zigzag-divider svg {
    display: block;
    width: 100%
}

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

    .contact-us-page .form-block__inner {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .contact-us-page .form-block__aside-heading {
        font-size: 31px
    }
}

@media (max-width: 768px) {
    .contact-us-page .reach-block {
        padding: 40px 16px
    }

    .contact-us-page .form-block {
        padding: 40px 16px
    }

    .contact-us-page .reach-block__heading {
        font-size: 41px
    }

    .contact-us-page .form-row {
        grid-template-columns: 1fr
    }

    .contact-us-page .contact-form {
        padding: 16px
    }

    .contact-us-page .radio-options {
        flex-direction: column
    }
}

@media (max-width: 480px) {
    .contact-us-page .reach-block__heading {
        font-size: 31px
    }

    .contact-us-page .submit-btn {
        width: 100%;
        text-align: center
    }

    .contact-us-page .reach-block,
    .contact-us-page .form-block {
        padding: 40px 8px
    }
}

.guides-page {
    overflow-x: hidden
}

.guides-page .drop-item {
    opacity: 0;
    transform: translateY(-32px);
    animation: dropIn .38s cubic-bezier(0.34, 1.2, 0.64, 1) forwards
}

.guides-page .drop-item:nth-child(1) {
    animation-delay: .05s
}

.guides-page .drop-item:nth-child(2) {
    animation-delay: .13s
}

.guides-page .drop-item:nth-child(3) {
    animation-delay: .21s
}

.guides-page .drop-item:nth-child(4) {
    animation-delay: .29s
}

.guides-page .drop-item:nth-child(5) {
    animation-delay: .37s
}

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

.guides-page .page-band {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px
}

.guides-page .title-strip {
    background: #fff;
    padding: 40px 0 0;
    position: relative
}

.guides-page .title-strip__frame {
    border: 1.5px solid #551386;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    position: relative
}

.guides-page .title-strip__frame::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #55138626;
    border-radius: 8px;
    pointer-events: none;
    z-index: 1
}

.guides-page .title-strip__text {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    z-index: 2
}

.guides-page .title-strip__label {
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #551386;
    line-height: 1.2
}

.guides-page .title-strip__heading {
    font-size: 41px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    margin: 0
}

.guides-page .title-strip__heading span {
    color: #551386
}

.guides-page .title-strip__desc {
    font-size: 15px;
    line-height: 1.55;
    color: #2a1040;
    max-width: 440px;
    letter-spacing: .01em;
    margin: 0
}

.guides-page .title-strip__image-col {
    position: relative;
    min-height: 260px
}

.guides-page .title-strip__image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.guides-page .title-strip__image-col::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #97ff142e;
    pointer-events: none
}

.guides-page .zigzag-divider {
    width: 100%;
    line-height: 0;
    margin: 0
}

.guides-page .posts-area {
    background: #fff;
    padding: 80px 0;
    position: relative
}

.guides-page .posts-area::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse at center, #f8ff9b61 0%, transparent 70%);
    pointer-events: none;
    z-index: 0
}

.guides-page .posts-area__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1
}

.guides-page .posts-area__heading {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 40px;
    color: #1b0033
}

.guides-page .posts-area__heading span {
    color: #97FF14;
    -webkit-text-stroke: 1px #551386
}

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

.guides-page .post-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: -1px 4px 28px 0 #55138617;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1), transform .36s ease-in-out;
    text-decoration: none;
    color: inherit;
    position: relative
}

.guides-page .post-card:hover {
    box-shadow: -1px 8px 36px 0 #5513861c;
    transform: translateY(-4px)
}

.guides-page .post-card__strip {
    height: 4px;
    background: #97FF14;
    width: 0;
    transition: width .4s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.guides-page .post-card:hover .post-card__strip {
    width: 100%
}

.guides-page .post-card__image-wrap {
    aspect-ratio: 16/9;
    overflow: hidden
}

.guides-page .post-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .42s ease-in-out
}

.guides-page .post-card:hover .post-card__image-wrap img {
    transform: scale(1.04)
}

.guides-page .post-card__body {
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

.guides-page .post-card__tags {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap
}

.guides-page .post-card__tag {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #551386;
    background: #f8ff9b99;
    border-radius: 8px;
    padding: 4px 8px;
    line-height: 1.2
}

.guides-page .post-card__category {
    font-size: 15px;
    color: #2a1040;
    background: #55138614;
    border-radius: 8px;
    padding: 4px 8px;
    line-height: 1.2
}

.guides-page .post-card__title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0033;
    margin: 0
}

.guides-page .post-card__subtitle {
    font-size: 15px;
    line-height: 1.55;
    color: #3a1060;
    margin: 0
}

.guides-page .post-card__desc {
    font-size: 15px;
    line-height: 1.55;
    color: #2a1040;
    margin: 0
}

.guides-page .post-card__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 8px 16px 16px;
    border-top: 1px solid #55138614;
    margin-top: auto
}

.guides-page .post-card__date {
    font-size: 15px;
    color: #551386;
    letter-spacing: .01em;
    line-height: 1.2
}

.guides-page .post-card__readtime {
    font-size: 15px;
    color: #2a1040;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    line-height: 1.2
}

.guides-page .readtime-dot {
    width: 5px;
    height: 5px;
    border-radius: 48px;
    background: #97FF14;
    display: inline-block;
    flex-shrink: 0
}

.guides-page .post-card__arrow {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #551386;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.guides-page .post-card:hover .post-card__arrow {
    background: #97FF14 !important
}

.guides-page .post-card__arrow svg {
    display: block
}

.guides-page .wave-bottom {
    width: 100%;
    overflow: hidden;
    line-height: 0
}

.guides-page .about-strip {
    background: linear-gradient(0deg, #fff 0%, #F8FF9B 100%);
    padding: 80px 0
}

.guides-page .about-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: center
}

.guides-page .about-strip__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #551386;
    line-height: 1.2;
    margin: 0 0 16px
}

.guides-page .about-strip__heading {
    font-size: 31px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
    color: #1b0033
}

.guides-page .about-strip__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px
}

.guides-page .about-strip__item {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.guides-page .about-strip__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #551386;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px 4px 28px 0 #55138617
}

.guides-page .about-strip__item-title {
    font-size: 15px;
    font-weight: 700;
    color: #1b0033;
    letter-spacing: .02em;
    margin: 0;
    line-height: 1.2
}

.guides-page .about-strip__item-text {
    font-size: 15px;
    line-height: 1.55;
    color: #2a1040;
    margin: 0
}

.guides-page .dual-narrative {
    background: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden
}

.guides-page .dual-narrative__decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none
}

.guides-page .dual-narrative__decoration svg {
    display: block;
    width: 100%
}

.guides-page .dual-narrative__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px
}

.guides-page .dual-narrative__top {
    margin: 0 0 40px
}

.guides-page .dual-narrative__heading {
    font-size: 41px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0033;
    margin: 0;
    text-transform: uppercase
}

.guides-page .dual-narrative__heading em {
    font-style: normal;
    color: #551386
}

.guides-page .dual-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px
}

.guides-page .path-card {
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    box-shadow: -1px 1px 6px 0 #5513860f
}

.guides-page .path-card--analyst {
    background: #551386;
    color: #fff
}

.guides-page .path-card--builder {
    background: #F8FF9B;
    color: #1b0033
}

.guides-page .path-card__num {
    font-size: 70px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.02em;
    opacity: .12;
    position: absolute;
    top: 16px;
    right: 16px;
    pointer-events: none
}

.guides-page .path-card--analyst .path-card__num {
    color: #97FF14;
    opacity: .2
}

.guides-page .path-card--builder .path-card__num {
    color: #551386;
    opacity: .12
}

.guides-page .path-card__badge {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2
}

.guides-page .path-card--analyst .path-card__badge {
    color: #97FF14
}

.guides-page .path-card--builder .path-card__badge {
    color: #551386
}

.guides-page .path-card__title {
    font-size: 31px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    letter-spacing: .02em
}

.guides-page .path-card--analyst .path-card__title {
    color: #fff
}

.guides-page .path-card--builder .path-card__title {
    color: #1b0033
}

.guides-page .path-card__text {
    font-size: 15px;
    line-height: 1.55;
    margin: 0
}

.guides-page .path-card--analyst .path-card__text {
    color: #ffffffd9
}

.guides-page .path-card--builder .path-card__text {
    color: #2a1040
}

.guides-page .path-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.guides-page .path-card__list li {
    font-size: 15px;
    line-height: 1.55;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px
}

.guides-page .path-card--analyst .path-card__list li {
    color: #ffffffd9
}

.guides-page .path-card--builder .path-card__list li {
    color: #2a1040
}

.guides-page .list-arrow {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px
}

.guides-page .path-card--analyst .list-arrow polygon {
    fill: #97FF14
}

.guides-page .path-card--builder .list-arrow polygon {
    fill: #551386
}

.guides-page .path-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
    border-radius: 48px;
    padding: 8px 16px;
    margin-top: 8px;
    transition: filter .35s ease-in-out;
    align-self: flex-start
}

.guides-page .path-card--analyst .path-card__cta {
    background: #97FF14;
    color: #1b0033
}

.guides-page .path-card--builder .path-card__cta {
    background: #551386;
    color: #fff
}

.guides-page .path-card__cta:hover {
    filter: brightness(1.1)
}

.guides-page .cta-strip {
    background: #551386;
    padding: 80px 0;
    position: relative;
    overflow: hidden
}

.guides-page .cta-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 80px
}

.guides-page .cta-strip__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.guides-page .cta-strip__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #97FF14;
    line-height: 1.2
}

.guides-page .cta-strip__heading {
    font-size: 41px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #fff;
    margin: 0
}

.guides-page .cta-strip__desc {
    font-size: 15px;
    line-height: 1.55;
    color: #ffffffd1;
    max-width: 480px;
    margin: 0
}

.guides-page .cta-strip__actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap
}

.guides-page .btn-primary {
    background: #97FF14;
    color: #1b0033;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 16px 40px;
    border-radius: 48px;
    text-decoration: none;
    display: inline-block;
    transition: filter .35s cubic-bezier(0.34, 1.2, 0.64, 1);
    line-height: 1.2
}

.guides-page .btn-primary:hover {
    filter: brightness(1.1)
}

.guides-page .btn-secondary {
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 16px 40px;
    border-radius: 48px;
    text-decoration: none;
    display: inline-block;
    border: 1.5px solid #ffffff59;
    transition: border-color .4s ease-in-out;
    line-height: 1.2
}

.guides-page .btn-secondary:hover {
    border-color: #97FF14
}

.guides-page .cta-strip__visual {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    border-radius: 12px;
    background: #97ff141a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px 8px 36px 0 #5513861c
}

@media (max-width: 1024px) {
    .guides-page .title-strip__heading {
        font-size: 31px
    }

    .guides-page .posts-grid {
        grid-template-columns: 1fr 1fr
    }

    .guides-page .dual-narrative__heading {
        font-size: 31px
    }

    .guides-page .cta-strip__heading {
        font-size: 31px
    }

    .guides-page .cta-strip__visual {
        display: none
    }

    .guides-page .cta-strip__inner {
        gap: 40px
    }

    .guides-page .about-strip__inner {
        grid-template-columns: 1fr;
        gap: 40px
    }
}

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

    .guides-page .title-strip__frame {
        grid-template-columns: 1fr
    }

    .guides-page .title-strip__image-col {
        min-height: 200px
    }

    .guides-page .title-strip__heading {
        font-size: 31px
    }

    .guides-page .posts-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .guides-page .posts-area__inner {
        padding: 0 16px
    }

    .guides-page .posts-area {
        padding: 40px 0
    }

    .guides-page .dual-narrative__inner {
        padding: 0 16px
    }

    .guides-page .dual-paths {
        grid-template-columns: 1fr
    }

    .guides-page .dual-narrative {
        padding: 40px 0
    }

    .guides-page .about-strip {
        padding: 40px 0
    }

    .guides-page .about-strip__inner {
        padding: 0 16px
    }

    .guides-page .about-strip__cols {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .guides-page .cta-strip {
        padding: 40px 0
    }

    .guides-page .cta-strip__inner {
        padding: 0 16px;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start
    }

    .guides-page .cta-strip__heading {
        font-size: 31px
    }

    .guides-page .dual-narrative__heading {
        font-size: 31px
    }
}

@media (max-width: 480px) {
    .guides-page .title-strip__text {
        padding: 16px
    }

    .guides-page .title-strip__heading {
        font-size: 19px
    }

    .guides-page .path-card {
        padding: 16px
    }

    .guides-page .path-card__title {
        font-size: 19px
    }

    .guides-page .path-card__num {
        font-size: 56px
    }

    .guides-page .cta-strip__actions {
        flex-direction: column
    }
}

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

.root .page-bound {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px
}

.root .diamond-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    overflow: hidden
}

.root .diamond-divider span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #551386;
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: .35
}

.root .diamond-row {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    overflow: hidden
}

.root .diamond-row span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #551386;
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: .28
}

.root .title-block {
    background: linear-gradient(160deg, #f0ffe0 0%, #e8d4ff 35%, #f8ff9b 65%, #fff 100%);
    padding: 80px 0 40px;
    position: relative
}

.root .title-block__pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden
}

.root .title-block__pattern svg {
    width: 100%;
    height: 100%;
    opacity: .08
}

.root .title-block__grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: center;
    position: relative
}

.root .title-block__left {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.root .title-block__eyebrow {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #551386;
    background: #55138614;
    padding: 8px 16px;
    border-radius: 48px;
    width: fit-content
}

.root .title-block__heading {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0a2e;
    margin: 0
}

.root .title-block__heading em {
    font-style: normal;
    color: #551386
}

.root .title-block__heading span {
    color: #97FF14;
    -webkit-text-stroke: 1px #3a7a00
}

.root .title-block__image-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: -1px 8px 36px 0 #5513861c;
    position: relative
}

.root .title-block__image-wrap img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.root .title-block__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #97ff142e 0%, #55138652 100%);
    pointer-events: none
}

.root .scope-block {
    background: #fff;
    padding: 80px 0
}

.root .scope-block__grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 80px;
    align-items: start
}

.root .scope-block__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.root .scope-block__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #551386
}

.root .scope-block__stat-shape {
    width: 120px;
    height: 120px;
    border: 3px solid #97FF14;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: -1px 4px 28px 0 #97ff1417
}

.root .scope-block__stat-number {
    font-size: 41px;
    font-weight: 900;
    line-height: 1.2;
    color: #1b0a2e;
    letter-spacing: .01em
}

.root .scope-block__stat-text {
    font-size: 15px;
    line-height: 1.55;
    color: #551386;
    font-weight: 600;
    text-align: center;
    padding: 0 8px
}

.root .scope-block__image-strip {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: -1px 1px 6px 0 #5513860f
}

.root .scope-block__image-strip img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.root .scope-block__body {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.root .scope-block__heading {
    font-size: 41px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0a2e;
    text-transform: uppercase;
    margin: 0
}

.root .scope-block__heading em {
    font-style: normal;
    color: #97FF14;
    -webkit-text-stroke: 1px #3a7a00
}

.root .scope-block__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.root .scope-block__list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-size: 19px;
    line-height: 1.55;
    color: #2a1040;
    letter-spacing: .01em
}

.root .scope-block__arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px
}

.root .scope-block__arrow svg {
    width: 20px;
    height: 20px
}

.root .scope-block__note {
    font-size: 15px;
    line-height: 1.55;
    color: #551386;
    background: #5513860f;
    border-radius: 8px;
    padding: 16px
}

.root .problem-block {
    background: #1b0a2e;
    padding: 80px 0;
    position: relative;
    overflow: hidden
}

.root .problem-block__zigzag-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    overflow: hidden
}

.root .problem-block__zigzag-top svg {
    width: 100%;
    height: 24px
}

.root .problem-block__zigzag-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    overflow: hidden
}

.root .problem-block__zigzag-bottom svg {
    width: 100%;
    height: 24px
}

.root .problem-block__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1
}

.root .problem-block__text {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.root .problem-block__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #97FF14
}

.root .problem-block__heading {
    font-size: 41px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #fff;
    text-transform: uppercase;
    margin: 0
}

.root .problem-block__heading em {
    font-style: normal;
    color: #F8FF9B
}

.root .problem-block__para {
    font-size: 19px;
    line-height: 1.55;
    color: #ffffffd1;
    letter-spacing: .01em
}

.root .problem-block__para strong {
    color: #97FF14;
    font-weight: 700
}

.root .problem-block__visual {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.root .problem-block__image-frame {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: -1px 8px 36px 0 #97ff141c
}

.root .problem-block__image-frame img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.root .problem-block__image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #97ff141f 0%, #55138673 100%);
    pointer-events: none
}

.root .problem-block__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.root .problem-block__metric {
    background: #ffffff0f;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #97ff142e
}

.root .problem-block__metric-value {
    font-size: 31px;
    font-weight: 900;
    line-height: 1.2;
    color: #97FF14;
    letter-spacing: .01em
}

.root .problem-block__metric-label {
    font-size: 15px;
    line-height: 1.55;
    color: #ffffffa6
}

.root .context-block {
    background: linear-gradient(180deg, #f8ff9b 0%, #fff 100%);
    padding: 80px 0
}

.root .context-block__top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px
}

.root .context-block__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #551386
}

.root .context-block__heading {
    font-size: 41px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0a2e;
    text-transform: uppercase;
    margin: 0;
    max-width: 700px
}

.root .context-block__heading em {
    font-style: normal;
    color: #551386
}

.root .context-block__columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: start
}

.root .context-block__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: -1px 4px 28px 0 #55138617;
    clip-path: inset(0 0 0 0);
    animation: reveal-card .45s cubic-bezier(0.34, 1.2, 0.64, 1) both
}

.root .context-block__card:nth-child(2) {
    animation-delay: .1s
}

.root .context-block__card:nth-child(3) {
    animation-delay: .2s
}

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

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

.root .context-block__card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0
}

.root .context-block__card-icon svg {
    width: 40px;
    height: 40px
}

.root .context-block__card-heading {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #1b0a2e;
    margin: 0
}

.root .context-block__card-text {
    font-size: 15px;
    line-height: 1.55;
    color: #2a1040;
    margin: 0
}

.root .context-block__image-wide {
    margin-top: 40px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: -1px 4px 28px 0 #55138617
}

.root .context-block__image-wide img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.root .approach-block {
    background: #fff;
    padding: 80px 0
}

.root .approach-block__layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 80px;
    align-items: start
}

.root .approach-block__main {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.root .approach-block__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #551386
}

.root .approach-block__heading {
    font-size: 41px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0a2e;
    text-transform: uppercase;
    margin: 0
}

.root .approach-block__heading em {
    font-style: normal;
    color: #551386
}

.root .approach-block__steps {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.root .approach-block__step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: start;
    padding: 16px;
    border-radius: 8px;
    background: #5513860a;
    transition: background .38s ease-in-out, box-shadow .38s ease-in-out
}

.root .approach-block__step:hover {
    background: #55138614;
    box-shadow: -1px 1px 6px 0 #5513860f
}

.root .approach-block__step-num {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #551386;
    color: #97FF14;
    font-size: 19px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.root .approach-block__step-text {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.root .approach-block__step-heading {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    color: #1b0a2e;
    margin: 0;
    text-transform: uppercase
}

.root .approach-block__step-desc {
    font-size: 15px;
    line-height: 1.55;
    color: #2a1040;
    margin: 0
}

.root .approach-block__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 40px
}

.root .approach-block__image-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: -1px 8px 36px 0 #5513861c
}

.root .approach-block__image-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.root .approach-block__highlight-box {
    background: #551386;
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.root .approach-block__highlight-heading {
    font-size: 31px;
    font-weight: 900;
    line-height: 1.2;
    color: #F8FF9B;
    margin: 0;
    letter-spacing: .01em
}

.root .approach-block__highlight-text {
    font-size: 15px;
    line-height: 1.55;
    color: #ffffffd9;
    margin: 0
}

.root .pattern-block {
    background: #f8f4ff;
    padding: 80px 0;
    position: relative
}

.root .pattern-block__zigzag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    overflow: hidden
}

.root .pattern-block__zigzag svg {
    width: 100%;
    height: 20px
}

.root .pattern-block__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 40px
}

.root .pattern-block__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #551386
}

.root .pattern-block__heading {
    font-size: 41px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #1b0a2e;
    text-transform: uppercase;
    margin: 0
}

.root .pattern-block__heading em {
    font-style: normal;
    color: #551386
}

.root .pattern-block__intro {
    font-size: 19px;
    line-height: 1.55;
    color: #2a1040;
    margin: 0;
    align-self: center
}

.root .pattern-block__quotes {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.root .pattern-block__quote {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 40px;
    align-items: start;
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: -1px 4px 28px 0 #55138617
}

.root .pattern-block__quote.featured {
    grid-template-columns: 1fr;
    background: #551386;
    border-radius: 12px
}

.root .pattern-block__quote-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center
}

.root .pattern-block__quote-avatar {
    width: 64px;
    height: 64px;
    border-radius: 48px;
    background: linear-gradient(180deg, #97FF14 0%, #551386 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.root .pattern-block__quote-avatar svg {
    width: 32px;
    height: 32px
}

.root .pattern-block__quote-name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    color: #1b0a2e;
    letter-spacing: .02em
}

.root .pattern-block__quote.featured .pattern-block__quote-name {
    color: #F8FF9B
}

.root .pattern-block__quote-role {
    font-size: 15px;
    line-height: 1.55;
    color: #551386
}

.root .pattern-block__quote.featured .pattern-block__quote-role {
    color: #f8ff9bb3
}

.root .pattern-block__quote-body {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.root .pattern-block__quote-mark {
    font-size: 56px;
    line-height: 1;
    color: #97FF14;
    font-weight: 900;
    margin-bottom: -16px
}

.root .pattern-block__quote.featured .pattern-block__quote-mark {
    color: #F8FF9B
}

.root .pattern-block__quote-text {
    font-size: 19px;
    line-height: 1.8;
    color: #2a1040;
    margin: 0;
    font-style: italic
}

.root .pattern-block__quote.featured .pattern-block__quote-text {
    color: #ffffffe6
}

.root .pattern-block__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px
}

.root .pattern-block__rating-stars {
    display: flex;
    gap: 4px
}

.root .pattern-block__rating-stars span {
    display: inline-block;
    width: 14px;
    height: 14px
}

.root .pattern-block__rating-stars span svg {
    width: 14px;
    height: 14px
}

.root .pattern-block__rating-count {
    font-size: 15px;
    color: #551386;
    font-weight: 600
}

.root .pattern-block__quote.featured .pattern-block__rating-count {
    color: #F8FF9B
}

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

    .root .title-block__heading {
        font-size: 41px
    }

    .root .scope-block__grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .root .problem-block__inner {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .root .context-block__columns {
        grid-template-columns: 1fr 1fr;
        gap: 40px
    }

    .root .approach-block__layout {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .root .approach-block__aside {
        position: static
    }

    .root .pattern-block__top {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .root .pattern-block__quote {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .root .pattern-block__quote-person {
        flex-direction: row;
        text-align: left;
        align-items: center
    }
}

@media (max-width: 768px) {
    .root .page-bound {
        padding-left: 16px;
        padding-right: 16px
    }

    .root .title-block {
        padding: 40px 0
    }

    .root .title-block__heading {
        font-size: 31px
    }

    .root .scope-block {
        padding: 40px 0
    }

    .root .problem-block {
        padding: 40px 0
    }

    .root .context-block {
        padding: 40px 0
    }

    .root .context-block__columns {
        grid-template-columns: 1fr
    }

    .root .approach-block {
        padding: 40px 0
    }

    .root .pattern-block {
        padding: 40px 0
    }

    .root .problem-block__metrics {
        grid-template-columns: 1fr
    }

    .root .scope-block__heading {
        font-size: 31px
    }

    .root .problem-block__heading {
        font-size: 31px
    }

    .root .context-block__heading {
        font-size: 31px
    }

    .root .approach-block__heading {
        font-size: 31px
    }

    .root .pattern-block__heading {
        font-size: 31px
    }
}

@media (max-width: 480px) {
    .root .title-block__heading {
        font-size: 31px
    }

    .root .approach-block__step {
        grid-template-columns: 1fr
    }
}

.success-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 80px 16px
}

.success-page .success-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: -1px 4px 28px 0 #97ff1417;
    max-width: 560px;
    padding: 80px 40px;
    text-align: center;
    width: 100%
}

.success-page .success-card .icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 40px;
    width: 72px;
    height: 72px;
    border-radius: 48px;
    background: linear-gradient(to top, #97FF14, #fff)
}

.success-page .success-card .icon-wrap svg {
    display: block
}

.success-page .success-card .success-heading {
    color: #551386;
    font-size: 31px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    margin: 0 0 16px;
    text-transform: uppercase
}

.success-page .success-card .success-text {
    color: #2d1a45;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: .01em;
    margin: 0 0 40px
}

.success-page .success-card .divider {
    background: #F8FF9B;
    border-radius: 8px;
    height: 3px;
    margin: 0 auto 40px;
    width: 48px
}

.success-page .success-card .back-link {
    border-radius: 8px;
    border: 2px solid #551386;
    color: #551386;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 16px 40px;
    text-decoration: none;
    transition: background .38s cubic-bezier(0.34, 1.2, 0.64, 1), color .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.success-page .success-card .back-link:hover,
.success-page .success-card .back-link:focus {
    background: #551386;
    color: #97FF14;
    outline: none
}

.success-page .success-card .back-link:active {
    filter: brightness(1.12)
}

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

    .success-page .success-card {
        padding: 40px 16px
    }

    .success-page .success-card .success-heading {
        font-size: 19px
    }
}