@import "https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@latest/400-italic.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@latest/700.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@latest/700-italic.css";

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: 'JetBrains Mono', monospace;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%
}

.hd-shell {
    position: relative;
    background: #242424;
    overflow: hidden
}

.hd-bg-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #00C8C4;
    pointer-events: none
}

.hd-bg-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: linear-gradient(135deg, transparent 30%, #00c8c412 100%);
    pointer-events: none
}

.hd-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 32px 32px 20px
}

.hd-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.brand-mount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0
}

.brand-logo-hold {
    width: 80px;
    height: 80px;
    border-radius: 48px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 1px 1px 3px -2px #00c8c414 1px 7px 22px -2px #00c8c417 1px 9px 36px -2px #00c8c421;
    border: 2px solid #00c8c44d
}

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

.brand-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: #E3E3E3;
    letter-spacing: .02em;
    line-height: 1.2;
    text-align: center
}

.hd-cred {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #00c8c41f;
    border: 1px solid #00c8c447;
    border-radius: 10px;
    padding: 8px 20px;
    flex-shrink: 0
}

.hd-cred-dot {
    width: 8px;
    height: 8px;
    border-radius: 48px;
    background: #00C8C4;
    flex-shrink: 0
}

.hd-cred-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #00C8C4;
    letter-spacing: .01em;
    line-height: 1.2;
    font-weight: 700
}

.hd-nav-row {
    border-top: 1px solid #e3e3e31a;
    padding-top: 20px
}

.hd-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center
}

.hd-nav-list li a {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 400;
    color: #E3E3E3;
    text-decoration: none;
    letter-spacing: .01em;
    line-height: 1.6;
    padding: 8px 20px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.hd-nav-list li a:hover {
    color: #00C8C4;
    background-color: #00c8c414;
    border-color: #00c8c433
}

.hd-nav-list li a:focus {
    outline: none;
    border-color: #00C8C4;
    background-color: #00c8c41a;
    color: #00C8C4
}

.hd-nav-list li.active a {
    color: #00C8C4;
    border-color: #00c8c459;
    background-color: #00c8c41a
}

@media (max-width: 1024px) {
    .hd-inner {
        padding: 20px
    }

    .hd-bg-accent {
        width: 260px
    }
}

@media (max-width: 640px) {
    .hd-top-row {
        justify-content: center;
        gap: 20px
    }

    .hd-inner {
        padding: 20px 12px
    }

    .hd-nav-list {
        justify-content: center
    }

    .hd-nav-list li a {
        font-size: 15px;
        padding: 8px 12px
    }
}

@media (max-width: 360px) {
    .hd-cred {
        padding: 8px 12px
    }

    .hd-nav-list li a {
        padding: 8px
    }
}

.ft-shell {
    background: #242424;
    border-top: 3px solid #00C8C4
}

.ft-upper {
    max-width: 1500px;
    margin: 0 auto;
    padding: 64px 32px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px;
    position: relative
}

.ft-col {
    position: relative;
    padding-left: 32px
}

.ft-col:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e3e3e31f
}

.ft-col:first-child {
    padding-left: 0
}

.ft-brand-hold {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px
}

.ft-logo-mount {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 1px 1px 3px -2px #00c8c414 1px 7px 22px -2px #00c8c417;
    border: 2px solid #00c8c440;
    flex-shrink: 0
}

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

.ft-brand-meta {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.ft-brand-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #E3E3E3;
    letter-spacing: .02em;
    line-height: 1.2
}

.ft-brand-since {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #e3e3e380;
    letter-spacing: .01em;
    line-height: 1.2
}

.ft-tagline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #e3e3e399;
    line-height: 1.6;
    letter-spacing: .01em
}

.ft-col-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: #00C8C4;
    letter-spacing: .02em;
    line-height: 1.2;
    margin-bottom: 20px;
    display: block
}

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

.ft-nav-list li a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #e3e3e3bf;
    text-decoration: none;
    letter-spacing: .01em;
    line-height: 1.6;
    display: inline-block;
    transition: color .2s ease-in-out;
    border-bottom: 1px solid transparent
}

.ft-nav-list li a:hover {
    color: #00C8C4;
    border-bottom-color: #00c8c466
}

.ft-nav-list li a:focus {
    outline: none;
    color: #00C8C4
}

.ft-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.ft-contact-list li {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.ft-contact-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #e3e3e366;
    letter-spacing: .01em;
    line-height: 1.2
}

.ft-contact-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #e3e3e3d9;
    letter-spacing: .01em;
    line-height: 1.6;
    text-decoration: none;
    transition: color .2s ease-in-out;
    word-break: break-all
}

.ft-contact-val:hover {
    color: #00C8C4
}

.ft-contact-val:focus {
    outline: none;
    color: #00C8C4
}

.ft-addr-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #e3e3e3bf;
    letter-spacing: .01em;
    line-height: 1.9
}

.ft-lower {
    border-top: 1px solid #e3e3e31a;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px
}

.ft-copy {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #e3e3e366;
    letter-spacing: .01em;
    line-height: 1.6
}

.ft-legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.ft-legal-list li a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #e3e3e373;
    text-decoration: none;
    letter-spacing: .01em;
    line-height: 1.6;
    transition: color .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.ft-legal-list li a:hover {
    color: #00C8C4
}

.ft-legal-list li a:focus {
    outline: none;
    color: #00C8C4
}

@media (max-width: 1024px) {
    .ft-upper {
        grid-template-columns: 1fr 1fr;
        padding: 32px 20px 20px
    }

    .ft-col:nth-child(3)::before {
        display: none
    }
}

@media (max-width: 640px) {
    .ft-upper {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .ft-col::before {
        display: none !important
    }

    .ft-col {
        padding-left: 0;
        border-top: 1px solid #e3e3e31a;
        padding-top: 32px
    }

    .ft-col:first-child {
        border-top: none;
        padding-top: 0
    }

    .ft-lower {
        padding: 20px 12px;
        flex-direction: column;
        align-items: flex-start
    }
}

@media (max-width: 360px) {
    .ft-upper {
        padding: 20px 12px
    }
}

.ck-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8000;
    display: none;
    background: #fff;
    border-bottom: 2px solid #00C8C4;
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.ck-bar.visible {
    display: block
}

.ck-bar.sliding-in {
    animation: ck-slide-in .26s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

.ck-bar.sliding-out {
    animation: ck-slide-out .26s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

@keyframes ck-slide-in {
    from {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes ck-slide-out {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-100%)
    }
}

.ck-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px
}

.ck-text-hold {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 200px
}

.ck-desc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #242424;
    line-height: 1.6;
    letter-spacing: .01em
}

.ck-head {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: #242424;
    line-height: 1.2;
    letter-spacing: .01em
}

.ck-opt-out {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    color: #24242499;
    line-height: 1.6;
    letter-spacing: .01em;
    margin-top: 4px
}

.ck-btn-hold {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0
}

.ck-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 6px;
    transition: color .2s ease-in-out, background-color .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.ck-btn.accept {
    color: #00C8C4
}

.ck-btn.accept:hover {
    color: #009e9b;
    background-color: #00c8c414
}

.ck-btn.accept:focus {
    outline: none;
    background-color: #00c8c41f;
    color: #009e9b
}

.ck-btn.decline {
    color: #2424248c
}

.ck-btn.decline:hover {
    color: #242424;
    background-color: #2424240f
}

.ck-btn.decline:focus {
    outline: none;
    background-color: #24242414;
    color: #242424
}

@media (max-width: 640px) {
    .ck-inner {
        padding: 20px 12px;
        flex-direction: column;
        align-items: flex-start
    }

    .ck-btn-hold {
        width: 100%;
        justify-content: flex-start
    }
}

.doc-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 64px 32px;
    color: #242424
}

.doc-inner p {
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: .01em;
    margin-bottom: 20px
}

.doc-inner ul,
.doc-inner ol {
    padding-left: 32px;
    margin-bottom: 20px
}

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

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

.doc-inner li {
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: .01em;
    margin-bottom: 8px
}

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

.doc-inner em,
.doc-inner i {
    font-style: italic;
    color: #242424
}

.doc-inner a {
    color: #00C8C4;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), opacity .18s ease-in-out
}

.doc-inner a:hover {
    opacity: .75;
    color: #242424
}

.doc-inner hr {
    border: none;
    border-top: 1.5px solid #E3E3E3;
    margin: 32px 0
}

@media (max-width: 640px) {
    .doc-inner {
        padding: 32px 20px
    }

    .doc-inner p,
    .doc-inner li {
        font-size: 15px
    }

    .doc-inner ul,
    .doc-inner ol {
        padding-left: 20px
    }
}

.intrvw-det {
    background: #fff;
    color: #242424;
    overflow-x: hidden
}

.intrvw-det .id-lead {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    max-width: 1500px;
    margin: 0 auto
}

.intrvw-det .id-lead-img {
    overflow: hidden;
    position: relative
}

.intrvw-det .id-lead-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
    display: block;
    transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1)
}

.intrvw-det .id-lead-img:hover img {
    transform: scale(1.03)
}

.intrvw-det .id-lead-txt {
    padding: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.intrvw-det .id-lead-txt .id-deco-lines {
    position: absolute;
    top: 32px;
    right: 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none
}

.intrvw-det .id-lead-txt .id-deco-lines span {
    display: block;
    height: 1.5px;
    background: #00C8C4;
    opacity: .35;
    border-radius: 6px
}

.intrvw-det .id-lead-txt .id-deco-lines span:nth-child(1) {
    width: 48px
}

.intrvw-det .id-lead-txt .id-deco-lines span:nth-child(2) {
    width: 32px
}

.intrvw-det .id-lead-txt .id-deco-lines span:nth-child(3) {
    width: 20px
}

.intrvw-det .id-tag {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #00C8C4;
    margin-bottom: 20px
}

.intrvw-det .id-lead-h {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #242424;
    margin: 0 0 20px
}

.intrvw-det .id-sub {
    font-size: 20px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 32px;
    letter-spacing: .01em
}

.intrvw-det .id-meta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.intrvw-det .id-author-name {
    font-size: 15px;
    font-weight: 700;
    color: #242424;
    letter-spacing: .02em
}

.intrvw-det .id-readtime {
    font-size: 15px;
    color: #888;
    letter-spacing: .01em
}

.intrvw-det .id-sep-dot {
    width: 5px;
    height: 5px;
    border-radius: 48px;
    background: #00C8C4;
    display: inline-block;
    flex-shrink: 0
}

.intrvw-det .id-likes-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #E3E3E3;
    border-radius: 32px;
    padding: 4px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #242424;
    box-shadow: 1px 1px 3px -2px #00c8c414;
    transition: border-color .25s ease-in-out, box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default
}

.intrvw-det .id-likes-badge:hover {
    border-color: #00C8C4;
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.intrvw-det .id-likes-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0
}

.intrvw-det .id-curve-div {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin: 0
}

.intrvw-det .id-curve-div svg {
    display: block;
    width: 100%
}

.intrvw-det .id-body-wrap {
    background: #fff;
    max-width: 1500px;
    margin: 0 auto;
    padding: 64px 64px 32px
}

.intrvw-det .id-body-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 64px;
    align-items: start
}

.intrvw-det .id-article-body {
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: .01em;
    color: #242424
}

.intrvw-det .id-article-body p {
    margin: 0 0 20px
}

.intrvw-det .id-article-body h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #242424;
    margin: 32px 0 20px;
    text-transform: uppercase
}

.intrvw-det .id-article-body h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    color: #242424;
    margin: 32px 0 12px;
    text-transform: uppercase
}

.intrvw-det .id-article-body blockquote {
    border-top: 2px solid #00C8C4;
    border-bottom: 2px solid #00C8C4;
    margin: 32px 0;
    padding: 20px 32px;
    background: #f5fffe;
    border-radius: 10px;
    font-size: 20px;
    line-height: 1.6;
    color: #242424;
    font-style: italic
}

.intrvw-det .id-article-body cite {
    display: block;
    font-size: 15px;
    color: #888;
    font-style: normal;
    margin-top: 8px
}

.intrvw-det .id-article-body ul {
    margin: 0 0 20px 20px;
    padding: 0
}

.intrvw-det .id-article-body ul li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 12px
}

.intrvw-det .id-article-body ul li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 48px;
    background: #00C8C4;
    position: absolute;
    left: -12px;
    top: 10px
}

.intrvw-det .id-article-body del {
    color: #aaa;
    text-decoration: line-through
}

.intrvw-det .id-article-body details {
    border: 1.5px solid #E3E3E3;
    border-radius: 10px;
    margin: 20px 0;
    padding: 12px 20px;
    transition: border-color .25s ease-in-out
}

.intrvw-det .id-article-body details[open] {
    border-color: #00C8C4
}

.intrvw-det .id-article-body summary {
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: .01em;
    color: #242424;
    padding: 4px 0;
    transition: color .2s ease-in-out
}

.intrvw-det .id-article-body summary:hover {
    color: #00C8C4
}

.intrvw-det .id-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: sticky;
    top: 32px
}

.intrvw-det .id-stat-shape {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border: 3px solid #00C8C4;
    border-radius: 48px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 1px 9px 36px -2px #00c8c421
}

.intrvw-det .id-stat-num {
    font-size: 48px;
    font-weight: 800;
    color: #242424;
    line-height: 1.2;
    letter-spacing: -.01em
}

.intrvw-det .id-stat-lbl {
    font-size: 15px;
    color: #00C8C4;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase
}

.intrvw-det .id-sidebar-card {
    background: #f5fffe;
    border-radius: 18px;
    padding: 32px 20px;
    text-align: center;
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.intrvw-det .id-sidebar-card .id-sc-label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #00C8C4;
    margin-bottom: 12px
}

.intrvw-det .id-sidebar-card .id-sc-txt {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0
}

.intrvw-det .id-cta-btn {
    display: inline-block;
    background: #242424;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: lowercase;
    padding: 12px 32px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s ease-in-out;
    box-shadow: 1px 7px 22px -2px #24242417
}

.intrvw-det .id-cta-btn:hover {
    background: #00C8C4;
    box-shadow: 1px 9px 36px -2px #00c8c421
}

.intrvw-det .id-tint-section {
    background: #00c8c40a;
    padding: 64px 0 32px
}

.intrvw-det .id-sched-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 64px
}

.intrvw-det .id-sched-head {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #242424;
    margin: 0 0 32px;
    text-align: center
}

.intrvw-det .id-sched-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.intrvw-det .id-sched-item {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 1px 7px 22px -2px #00c8c417;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1), transform .25s ease-in-out
}

.intrvw-det .id-sched-item:hover {
    box-shadow: 1px 9px 36px -2px #00c8c421;
    transform: translateY(-2px)
}

.intrvw-det .id-sched-time {
    font-size: 15px;
    font-weight: 700;
    color: #00C8C4;
    letter-spacing: .06em;
    text-transform: uppercase
}

.intrvw-det .id-sched-topic {
    font-size: 16px;
    font-weight: 700;
    color: #242424;
    line-height: 1.6
}

.intrvw-det .id-sched-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0
}

.intrvw-det .id-pattern-section {
    position: relative;
    padding: 64px 0;
    overflow: hidden
}

.intrvw-det .id-pattern-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0
}

.intrvw-det .id-pattern-bg svg {
    width: 100%;
    height: 100%
}

.intrvw-det .id-contact-inner {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center
}

.intrvw-det .id-contact-txt h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #242424;
    margin: 0 0 20px
}

.intrvw-det .id-contact-txt p {
    font-size: 16px;
    line-height: 1.9;
    color: #555;
    margin: 0 0 32px
}

.intrvw-det .id-form {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.intrvw-det .id-field {
    position: relative
}

.intrvw-det .id-field input,
.intrvw-det .id-field textarea {
    width: 100%;
    border: 1.5px solid #E3E3E3;
    border-radius: 10px;
    padding: 20px 20px 8px;
    font-size: 16px;
    color: #242424;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color .25s ease-in-out, box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: .01em
}

.intrvw-det .id-field textarea {
    min-height: 120px;
    resize: vertical
}

.intrvw-det .id-field label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #888;
    pointer-events: none;
    transition: top .2s ease-in-out, font-size .2s ease-in-out, color .2s ease-in-out;
    letter-spacing: .01em
}

.intrvw-det .id-field.txt-area label {
    top: 20px;
    transform: none
}

.intrvw-det .id-field input:focus,
.intrvw-det .id-field textarea:focus {
    border-color: #00C8C4;
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.intrvw-det .id-field input:focus+label,
.intrvw-det .id-field input:not(:placeholder-shown)+label {
    top: 8px;
    transform: none;
    font-size: 15px;
    color: #00C8C4
}

.intrvw-det .id-field textarea:focus+label,
.intrvw-det .id-field textarea:not(:placeholder-shown)+label {
    top: 6px;
    font-size: 15px;
    color: #00C8C4
}

.intrvw-det .id-submit-btn {
    background: #00C8C4;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: lowercase;
    padding: 12px 32px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    align-self: flex-start;
    transition: background .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s ease-in-out;
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.intrvw-det .id-submit-btn:hover {
    background: #242424;
    box-shadow: 1px 9px 36px -2px #24242421
}

.intrvw-det .id-submit-btn:focus {
    outline: 2px solid #00C8C4;
    outline-offset: 3px
}

.intrvw-det .id-col-anim .id-sched-item {
    opacity: 0;
    transform: translateY(24px);
    animation: colReveal .45s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

.intrvw-det .id-col-anim .id-sched-item:nth-child(1) {
    animation-delay: .1s
}

.intrvw-det .id-col-anim .id-sched-item:nth-child(2) {
    animation-delay: .25s
}

.intrvw-det .id-col-anim .id-sched-item:nth-child(3) {
    animation-delay: .4s
}

.intrvw-det .id-col-anim .id-sched-item:nth-child(4) {
    animation-delay: .55s
}

.intrvw-det .id-col-anim .id-sched-item:nth-child(5) {
    animation-delay: .7s
}

.intrvw-det .id-col-anim .id-sched-item:nth-child(6) {
    animation-delay: .85s
}

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

.intrvw-det .id-body-col-anim .id-article-body,
.intrvw-det .id-body-col-anim .id-sidebar {
    opacity: 0;
    animation: colReveal .5s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

.intrvw-det .id-body-col-anim .id-article-body {
    animation-delay: .15s
}

.intrvw-det .id-body-col-anim .id-sidebar {
    animation-delay: .35s
}

@media (max-width: 1024px) {
    .intrvw-det .id-lead {
        grid-template-columns: 1fr
    }

    .intrvw-det .id-lead-img {
        min-height: 320px
    }

    .intrvw-det .id-lead-txt {
        padding: 32px
    }

    .intrvw-det .id-lead-h {
        font-size: 34px
    }

    .intrvw-det .id-body-wrap {
        padding: 32px
    }

    .intrvw-det .id-body-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .intrvw-det .id-sidebar {
        position: static
    }

    .intrvw-det .id-sched-wrap {
        padding: 0 32px
    }

    .intrvw-det .id-sched-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .intrvw-det .id-contact-inner {
        grid-template-columns: 1fr;
        padding: 0 32px;
        gap: 32px
    }
}

@media (max-width: 640px) {
    .intrvw-det .id-lead-h {
        font-size: 24px
    }

    .intrvw-det .id-lead-txt {
        padding: 20px
    }

    .intrvw-det .id-sub {
        font-size: 16px
    }

    .intrvw-det .id-body-wrap {
        padding: 20px
    }

    .intrvw-det .id-sched-wrap {
        padding: 0 20px
    }

    .intrvw-det .id-sched-grid {
        grid-template-columns: 1fr
    }

    .intrvw-det .id-contact-inner {
        padding: 0 20px
    }

    .intrvw-det .id-sched-head {
        font-size: 24px
    }
}

@media (max-width: 360px) {
    .intrvw-det .id-lead-h {
        font-size: 20px
    }

    .intrvw-det .id-meta-row {
        gap: 8px
    }
}

@media print {

    .intrvw-det .id-deco-lines,
    .intrvw-det .id-pattern-bg,
    .intrvw-det .id-pattern-section,
    .intrvw-det .id-curve-div,
    .intrvw-det .id-sidebar,
    .intrvw-det .id-likes-badge,
    .intrvw-det .id-stat-shape,
    .intrvw-det .id-sidebar-card,
    .intrvw-det .id-cta-btn {
        display: none !important
    }

    .intrvw-det .id-lead {
        grid-template-columns: 1fr
    }

    .intrvw-det .id-body-grid {
        grid-template-columns: 1fr
    }

    .intrvw-det .id-lead-img img {
        max-height: 300px
    }

    .intrvw-det .id-body-wrap {
        padding: 20px
    }

    .intrvw-det .id-sched-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .intrvw-det .id-tint-section {
        background: #fff
    }

    .intrvw-det {
        color: #000
    }
}

.ct-us {
    background: #fff;
    overflow-x: hidden
}

.ct-us .band-top {
    background: #242424;
    padding: 32px 0 20px;
    position: relative
}

.ct-us .band-top::after {
    content: '';
    display: block;
    height: 4px;
    background: #00C8C4;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.ct-us .band-top-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px
}

.ct-us .band-abbr {
    font-size: 64px;
    font-weight: 900;
    color: #00c8c41f;
    letter-spacing: .02em;
    line-height: 1.2;
    user-select: none;
    pointer-events: none;
    flex-shrink: 0
}

.ct-us .band-text h1 {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: .01em;
    margin: 0 0 8px;
    text-transform: uppercase
}

.ct-us .band-text p {
    font-size: 16px;
    color: #E3E3E3;
    line-height: 1.6;
    letter-spacing: .01em;
    margin: 0;
    max-width: 480px
}

.ct-us .band-stripe {
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #00C8C4, transparent);
    margin-top: 20px
}

.ct-us .form-area {
    max-width: 1500px;
    margin: 0 auto;
    padding: 64px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start
}

.ct-us .contact-details-col {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.ct-us .detail-group {
    border-left: 4px solid #00C8C4;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ct-us .detail-group h4 {
    font-size: 15px;
    font-weight: 700;
    color: #00C8C4;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2
}

.ct-us .detail-group p {
    font-size: 16px;
    color: #242424;
    line-height: 1.6;
    margin: 0;
    letter-spacing: .01em
}

.ct-us .detail-group a {
    color: #242424;
    text-decoration: none;
    transition: color .25s ease-in-out
}

.ct-us .detail-group a:hover {
    color: #00C8C4
}

.ct-us .info-note {
    background: #242424;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.ct-us .info-note h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 12px;
    line-height: 1.2
}

.ct-us .info-note p {
    font-size: 15px;
    color: #E3E3E3;
    line-height: 1.9;
    margin: 0;
    letter-spacing: .01em
}

.ct-us .form-col {
    background: #fff;
    border-radius: 18px;
    box-shadow: 1px 9px 36px -2px #00c8c421;
    padding: 32px
}

.ct-us .form-col h2 {
    font-size: 24px;
    font-weight: 800;
    color: #242424;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 20px;
    line-height: 1.2;
    text-align: center
}

.ct-us .form-field {
    margin-bottom: 20px;
    position: relative
}

.ct-us .form-field label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #242424;
    letter-spacing: .01em;
    margin-bottom: 8px;
    line-height: 1.2;
    transition: color .2s ease-in-out
}

.ct-us .form-field input[type="email"],
.ct-us .form-field textarea {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid #E3E3E3;
    border-radius: 10px;
    font-size: 16px;
    color: #242424;
    background: #fff;
    outline: none;
    transition: border-color .25s ease-in-out, box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    line-height: 1.6;
    letter-spacing: .01em
}

.ct-us .form-field input[type="email"]::placeholder,
.ct-us .form-field textarea::placeholder {
    color: #aaa
}

.ct-us .form-field input[type="email"]:focus,
.ct-us .form-field textarea:focus {
    border-color: #00C8C4;
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.ct-us .form-field textarea {
    min-height: 120px;
    resize: vertical
}

.ct-us .radio-group-label {
    font-size: 15px;
    font-weight: 600;
    color: #242424;
    letter-spacing: .01em;
    margin-bottom: 12px;
    display: block;
    line-height: 1.2
}

.ct-us .radio-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px
}

.ct-us .radio-opt {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border: 2px solid #E3E3E3;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .25s ease-in-out, background .2s ease-in-out
}

.ct-us .radio-opt:hover {
    border-color: #00C8C4;
    background: #00c8c40a
}

.ct-us .radio-opt input[type="radio"] {
    accent-color: #00C8C4;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer
}

.ct-us .radio-opt input[type="radio"]:checked+span {
    color: #00C8C4;
    font-weight: 700
}

.ct-us .radio-opt span {
    font-size: 15px;
    color: #242424;
    letter-spacing: .01em;
    line-height: 1.6;
    transition: color .2s ease-in-out
}

.ct-us .privacy-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 20px;
    background: #e3e3e34d;
    border-radius: 10px
}

.ct-us .privacy-row input[type="checkbox"] {
    accent-color: #00C8C4;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer
}

.ct-us .privacy-row label {
    font-size: 15px;
    color: #242424;
    line-height: 1.6;
    letter-spacing: .01em;
    cursor: pointer
}

.ct-us .privacy-row label a {
    color: #00C8C4;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .2s ease-in-out
}

.ct-us .privacy-row label a:hover {
    color: #242424
}

.ct-us .submit-btn {
    display: block;
    width: 100%;
    padding: 20px 32px;
    background: #00C8C4;
    color: #242424;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: lowercase;
    cursor: pointer;
    transition: background .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s ease-in-out, transform .15s ease-in-out;
    box-shadow: 1px 7px 22px -2px #00c8c417;
    line-height: 1.2
}

.ct-us .submit-btn:hover {
    background: #242424;
    color: #00C8C4;
    box-shadow: 1px 9px 36px -2px #00c8c421
}

.ct-us .submit-btn:active {
    transform: scale(0.98)
}

.ct-us .submit-btn:focus-visible {
    outline: 2px solid #00C8C4;
    outline-offset: 3px
}

.ct-us .icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #00c8c41f;
    border-radius: 10px;
    flex-shrink: 0;
    transition: background .25s ease-in-out
}

.ct-us .detail-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px
}

.ct-us .detail-item:hover .icon-wrap {
    background: #00c8c438
}

.ct-us .detail-item:hover .icon-wrap svg {
    animation: icon-spin .45s cubic-bezier(0.4, 0, 0.2, 1) forwards
}

@keyframes icon-spin {
    0% {
        transform: rotate(0deg)
    }

    70% {
        transform: rotate(20deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

.ct-us .detail-item-text {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.ct-us .detail-item-text span {
    font-size: 15px;
    font-weight: 700;
    color: #00C8C4;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2
}

.ct-us .detail-item-text p {
    font-size: 16px;
    color: #242424;
    line-height: 1.6;
    margin: 0;
    letter-spacing: .01em
}

.ct-us .detail-item-text a {
    color: #242424;
    text-decoration: none;
    transition: color .25s ease-in-out
}

.ct-us .detail-item-text a:hover {
    color: #00C8C4
}

@media (max-width: 1024px) {
    .ct-us .form-area {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 20px
    }

    .ct-us .band-top-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .ct-us .band-abbr {
        font-size: 48px
    }

    .ct-us .band-text h1 {
        font-size: 34px
    }
}

@media (max-width: 640px) {
    .ct-us .band-text h1 {
        font-size: 24px
    }

    .ct-us .band-top-inner {
        padding: 0 20px
    }

    .ct-us .form-col {
        padding: 20px
    }

    .ct-us .info-note {
        padding: 20px
    }
}

@media (max-width: 360px) {
    .ct-us .band-text h1 {
        font-size: 20px
    }

    .ct-us .form-area {
        padding: 20px 12px
    }
}

.srvs-pg {
    background: #fff;
    overflow-x: clip
}

.srvs-pg .pg-lead {
    max-width: 1500px;
    margin: 0 auto;
    padding: 64px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative
}

.srvs-pg .pg-lead::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    border: 1px solid #E3E3E3;
    border-radius: 18px;
    pointer-events: none
}

.srvs-pg .pg-lead::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border: 1px solid #00c8c42e;
    border-radius: 18px;
    pointer-events: none
}

.srvs-pg .lead-txt {
    padding: 32px 32px 32px 64px;
    order: 1
}

.srvs-pg .lead-visual {
    order: 2;
    position: relative
}

.srvs-pg .lead-visual .img-wrap {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: 1px 9px 36px -2px #00c8c421
}

.srvs-pg .lead-visual .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .45s cubic-bezier(0.4, 0, 0.2, 1)
}

.srvs-pg .lead-visual .img-wrap:hover img {
    filter: brightness(0.93)
}

.srvs-pg .lead-visual .deco-shape {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: #00C8C4;
    clip-path: polygon(0 30%, 30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
    opacity: .12;
    border-radius: 6px;
    pointer-events: none
}

.srvs-pg .lead-tag {
    display: inline-block;
    background: #00C8C4;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 20px;
    border-radius: 6px;
    margin-bottom: 20px
}

.srvs-pg .lead-h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #242424;
    margin: 0 0 20px
}

.srvs-pg .lead-h1 .grad-word {
    background: linear-gradient(to top, #00C8C4, #242424);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.srvs-pg .lead-desc {
    font-size: 16px;
    line-height: 1.9;
    color: #555;
    letter-spacing: .01em;
    margin: 0 0 32px;
    max-width: 480px
}

.srvs-pg .lead-stats {
    display: flex;
    flex-direction: row;
    gap: 32px
}

.srvs-pg .stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.srvs-pg .stat-num {
    font-size: 34px;
    font-weight: 800;
    color: #00C8C4;
    line-height: 1.2;
    letter-spacing: .01em
}

.srvs-pg .stat-lbl {
    font-size: 15px;
    color: #242424;
    line-height: 1.6;
    letter-spacing: .02em
}

.srvs-pg .srv-list-band {
    background: #242424;
    clip-path: polygon(0 0, 100% 24px, 100% 100%, 0 calc(100% - 24px));
    padding: 80px 32px;
    animation: desat-cycle 8s ease-in-out infinite
}

@keyframes desat-cycle {
    0% {
        filter: saturate(1)
    }

    45% {
        filter: saturate(0.25)
    }

    55% {
        filter: saturate(0.25)
    }

    100% {
        filter: saturate(1)
    }
}

.srvs-pg .srv-list-inner {
    max-width: 1500px;
    margin: 0 auto
}

.srvs-pg .srv-list-hd {
    text-align: center;
    margin-bottom: 64px
}

.srvs-pg .srv-list-hd h2 {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 12px
}

.srvs-pg .srv-list-hd p {
    font-size: 16px;
    color: #ffffffa6;
    line-height: 1.9;
    letter-spacing: .01em;
    max-width: 560px;
    margin: 0 auto
}

.srvs-pg .srv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.srvs-pg .srv-card {
    background: #ffffff0d;
    border: 1px solid #ffffff1a;
    border-radius: 18px;
    padding: 32px;
    position: relative;
    transition: background .38s cubic-bezier(0.4, 0, 0.2, 1), border-color .22s ease-in-out
}

.srvs-pg .srv-card:hover {
    background: #00c8c41a;
    border-color: #00c8c466
}

.srvs-pg .srv-card .card-bar {
    width: 3px;
    height: 40px;
    background: #00C8C4;
    border-radius: 6px;
    margin-bottom: 20px;
    transition: height .32s ease-in-out
}

.srvs-pg .srv-card:hover .card-bar {
    height: 56px
}

.srvs-pg .srv-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 12px
}

.srvs-pg .srv-card p {
    font-size: 15px;
    color: #ffffffa6;
    line-height: 1.9;
    letter-spacing: .01em;
    margin: 0 0 20px
}

.srvs-pg .srv-card .card-price {
    font-size: 24px;
    font-weight: 800;
    color: #00C8C4;
    letter-spacing: .01em
}

.srvs-pg .srv-card .card-dur {
    font-size: 15px;
    color: #ffffff73;
    letter-spacing: .01em;
    margin-left: 8px
}

.srvs-pg .detail-band {
    background: #F5F5F5;
    clip-path: polygon(0 24px, 100% 0, 100% calc(100% - 24px), 0 100%);
    padding: 96px 32px
}

.srvs-pg .detail-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start
}

.srvs-pg .detail-col-txt {
    padding: 32px 0
}

.srvs-pg .detail-col-txt h2 {
    font-size: 34px;
    font-weight: 800;
    color: #242424;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 20px
}

.srvs-pg .detail-col-txt h2 em {
    font-style: italic;
    color: #00C8C4
}

.srvs-pg .detail-col-txt p {
    font-size: 16px;
    color: #444;
    line-height: 1.9;
    letter-spacing: .01em;
    margin: 0 0 20px
}

.srvs-pg .process-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 32px
}

.srvs-pg .step-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start
}

.srvs-pg .step-num {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #00C8C4;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .01em
}

.srvs-pg .step-body h5 {
    font-size: 16px;
    font-weight: 700;
    color: #242424;
    line-height: 1.2;
    margin: 0 0 4px;
    letter-spacing: .02em
}

.srvs-pg .step-body p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    letter-spacing: .01em
}

.srvs-pg .detail-col-vis {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.srvs-pg .donut-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 1px 7px 22px -2px #00c8c417;
    text-align: center
}

.srvs-pg .donut-wrap h4 {
    font-size: 16px;
    font-weight: 700;
    color: #242424;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 20px
}

.srvs-pg .donut-chart {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 20px
}

.srvs-pg .donut-chart svg {
    width: 180px;
    height: 180px;
    transform: rotate(-90deg)
}

.srvs-pg .donut-chart .donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

.srvs-pg .donut-center-num {
    font-size: 34px;
    font-weight: 800;
    color: #242424;
    line-height: 1.2;
    letter-spacing: .01em;
    display: block
}

.srvs-pg .donut-center-lbl {
    font-size: 15px;
    color: #888;
    line-height: 1.6;
    letter-spacing: .01em
}

.srvs-pg .donut-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left
}

.srvs-pg .legend-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px
}

.srvs-pg .legend-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    border-radius: 48px
}

.srvs-pg .legend-lbl {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    letter-spacing: .01em;
    flex: 1
}

.srvs-pg .legend-val {
    font-size: 15px;
    font-weight: 700;
    color: #242424;
    letter-spacing: .01em
}

.srvs-pg .img2-wrap {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: 1px 7px 22px -2px #00c8c417
}

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

.srvs-pg .img2-wrap:hover img {
    filter: brightness(0.91)
}

.srvs-pg .faq-band {
    background: #fff;
    padding: 80px 32px
}

.srvs-pg .faq-inner {
    max-width: 1500px;
    margin: 0 auto
}

.srvs-pg .faq-hd {
    margin-bottom: 48px
}

.srvs-pg .faq-hd h2 {
    font-size: 34px;
    font-weight: 800;
    color: #242424;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 12px
}

.srvs-pg .faq-hd p {
    font-size: 16px;
    color: #555;
    line-height: 1.9;
    letter-spacing: .01em;
    max-width: 560px
}

.srvs-pg .faq-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.srvs-pg .faq-item {
    border: 1px solid #E3E3E3;
    border-radius: 18px;
    padding: 32px;
    transition: border-color .28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s ease-in-out
}

.srvs-pg .faq-item:hover {
    border-color: #00C8C4;
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.srvs-pg .faq-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: #242424;
    line-height: 1.6;
    letter-spacing: .01em;
    margin: 0 0 12px
}

.srvs-pg .faq-item p {
    font-size: 15px;
    color: #555;
    line-height: 1.9;
    letter-spacing: .01em;
    margin: 0
}

@media (max-width: 1024px) {
    .srvs-pg .pg-lead {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 32px
    }

    .srvs-pg .lead-txt {
        order: 2;
        padding: 0 20px
    }

    .srvs-pg .lead-visual {
        order: 1
    }

    .srvs-pg .srv-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .srvs-pg .detail-inner {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .srvs-pg .faq-cols {
        grid-template-columns: 1fr
    }
}

@media (max-width: 640px) {
    .srvs-pg .pg-lead {
        padding: 32px 20px
    }

    .srvs-pg .lead-h1 {
        font-size: 34px
    }

    .srvs-pg .srv-grid {
        grid-template-columns: 1fr
    }

    .srvs-pg .lead-stats {
        flex-direction: column;
        gap: 20px
    }

    .srvs-pg .srv-list-band {
        padding: 64px 20px
    }

    .srvs-pg .detail-band {
        padding: 64px 20px
    }

    .srvs-pg .faq-band {
        padding: 48px 20px
    }

    .srvs-pg .srv-list-hd h2 {
        font-size: 34px
    }
}

@media (max-width: 360px) {
    .srvs-pg .lead-h1 {
        font-size: 24px
    }

    .srvs-pg .stat-num {
        font-size: 24px
    }
}

.intrvw-pg {
    background: #fff;
    overflow-x: hidden
}

.intrvw-pg .pg-bound {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px
}

.intrvw-pg .title-area {
    padding: 64px 0 32px;
    position: relative
}

.intrvw-pg .title-area .ta-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
    min-height: 420px
}

.intrvw-pg .ta-text {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 32px 64px 0;
    position: relative;
    z-index: 2
}

.intrvw-pg .ta-eyebrow {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #00C8C4;
    margin-bottom: 20px
}

.intrvw-pg .ta-h1 {
    font-size: 64px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .01em;
    color: #242424;
    margin: 0 0 20px
}

.intrvw-pg .ta-h1 em {
    font-style: italic;
    font-weight: 400
}

.intrvw-pg .ta-sub {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    letter-spacing: .01em;
    max-width: 340px
}

.intrvw-pg .ta-img-zone {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 32px 0 32px 32px
}

.intrvw-pg .ta-blob-a {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 48% 60% 50% 70%;
    background: #00c8c421;
    top: 20px;
    right: 40px;
    filter: blur(38px);
    pointer-events: none
}

.intrvw-pg .ta-blob-b {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 60% 40% 70% 30%;
    background: #24242412;
    bottom: 30px;
    right: 120px;
    filter: blur(28px);
    pointer-events: none
}

.intrvw-pg .ta-img-wrap {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 1px 9px 36px -2px #00c8c421
}

.intrvw-pg .ta-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(0px)
}

.intrvw-pg .ta-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, transparent 40%, #ffffff8c 100%);
    pointer-events: none
}

.intrvw-pg .wave-band {
    position: relative;
    height: 6px;
    overflow: hidden;
    background: #E3E3E3
}

.intrvw-pg .wave-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background: linear-gradient(90deg, #E3E3E3 0%, #00C8C4 30%, #E3E3E3 60%, #00C8C4 80%, #E3E3E3 100%);
    animation: wv-pass 5s linear infinite
}

@keyframes wv-pass {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(33.33%)
    }
}

.intrvw-pg .posts-area {
    padding: 64px 0
}

.intrvw-pg .posts-area .sec-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #00C8C4;
    margin-bottom: 12px;
    display: block
}

.intrvw-pg .posts-area .sec-h2 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #242424;
    margin: 0 0 32px
}

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

.intrvw-pg .post-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 1px 7px 22px -2px #00c8c417;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s cubic-bezier(0.4, 0, 0.2, 1), transform .25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden
}

.intrvw-pg .post-card:hover {
    box-shadow: 1px 9px 36px -2px #00c8c421;
    transform: translateY(-4px)
}

.intrvw-pg .post-card:hover .card-img img {
    filter: brightness(0.93)
}

.intrvw-pg .card-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    flex-shrink: 0
}

.intrvw-pg .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .35s ease-in-out
}

.intrvw-pg .card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px
}

.intrvw-pg .card-subtitle {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #00C8C4
}

.intrvw-pg .card-title {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
    color: #242424;
    letter-spacing: .01em;
    margin: 0
}

.intrvw-pg .card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    letter-spacing: .01em;
    margin: 0
}

.intrvw-pg .card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #E3E3E3
}

.intrvw-pg .card-author {
    font-size: 15px;
    font-weight: 600;
    color: #242424;
    letter-spacing: .01em
}

.intrvw-pg .card-dot {
    width: 4px;
    height: 4px;
    border-radius: 48px;
    background: #E3E3E3;
    flex-shrink: 0
}

.intrvw-pg .card-rt {
    font-size: 15px;
    color: #888;
    letter-spacing: .01em
}

.intrvw-pg .card-likes {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    color: #888
}

.intrvw-pg .like-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0
}

.intrvw-pg .like-icon svg {
    width: 16px;
    height: 16px;
    fill: #00C8C4
}

.intrvw-pg .card-link {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 20px;
    border-radius: 10px;
    background: #242424;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: lowercase;
    transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s cubic-bezier(0.4, 0, 0.2, 1);
    align-self: flex-start
}

.intrvw-pg .card-link:hover {
    background: #00C8C4;
    color: #fff
}

.intrvw-pg .card-link:focus {
    outline: 2px solid #00C8C4;
    outline-offset: 2px
}

.intrvw-pg .mesh-band {
    position: relative;
    padding: 64px 0;
    background: linear-gradient(170deg, #f2fffe 0%, #e8fffe 30%, #d4f7f6 55%, #b8f0ef 80%, #e3e3e3 100%);
    overflow: hidden
}

.intrvw-pg .mesh-band::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #00c8c41a;
    top: -120px;
    right: -80px;
    filter: blur(60px);
    pointer-events: none
}

.intrvw-pg .mesh-band::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #2424240d;
    bottom: -60px;
    left: 60px;
    filter: blur(50px);
    pointer-events: none
}

.intrvw-pg .about-cols {
    display: flex;
    flex-direction: row;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1
}

.intrvw-pg .about-text {
    flex: 1
}

.intrvw-pg .about-text .at-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #00C8C4;
    display: block;
    margin-bottom: 12px
}

.intrvw-pg .about-text .at-h2 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #242424;
    margin: 0 0 20px
}

.intrvw-pg .about-text .at-p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    letter-spacing: .01em;
    margin: 0 0 12px
}

.intrvw-pg .about-stats {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.intrvw-pg .stat-row {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.intrvw-pg .stat-label {
    font-size: 15px;
    font-weight: 600;
    color: #242424;
    letter-spacing: .01em
}

.intrvw-pg .stat-bar-bg {
    background: #00c8c426;
    border-radius: 6px;
    height: 10px;
    width: 100%;
    overflow: hidden
}

.intrvw-pg .stat-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #00C8C4 0%, #242424 100%);
    animation: bar-grow 1.1s cubic-bezier(0.4, 0, 0.2, 1) both
}

@keyframes bar-grow {
    from {
        width: 0 !important
    }
}

.intrvw-pg .stat-note {
    font-size: 15px;
    color: #666;
    letter-spacing: .01em
}

.intrvw-pg .cta-strip {
    padding: 64px 0;
    background: #242424;
    position: relative;
    overflow: hidden
}

.intrvw-pg .cta-strip::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00C8C4, transparent);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: wv-pass 4s linear infinite
}

.intrvw-pg .cta-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px
}

.intrvw-pg .cta-text .ct-h2 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px
}

.intrvw-pg .cta-text .ct-p {
    font-size: 16px;
    line-height: 1.6;
    color: #bbb;
    letter-spacing: .01em;
    margin: 0;
    max-width: 460px
}

.intrvw-pg .cta-btn {
    display: inline-block;
    padding: 20px 32px;
    border-radius: 10px;
    background: #00C8C4;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: lowercase;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .4s cubic-bezier(0.4, 0, 0.2, 1), color .4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.intrvw-pg .cta-btn:hover {
    background: #fff;
    color: #242424
}

.intrvw-pg .cta-btn:focus {
    outline: 2px solid #00C8C4;
    outline-offset: 3px
}

.intrvw-pg .type-anim {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #00C8C4;
    animation: type-cursor .7s step-end infinite, type-reveal 2.2s steps(30, end) both;
    max-width: 100%
}

@keyframes type-cursor {

    0%,
    100% {
        border-color: #00C8C4
    }

    50% {
        border-color: transparent
    }
}

@keyframes type-reveal {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

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

    .intrvw-pg .ta-h1 {
        font-size: 48px
    }

    .intrvw-pg .about-cols {
        flex-direction: column;
        gap: 32px
    }

    .intrvw-pg .about-stats {
        flex: none;
        width: 100%
    }

    .intrvw-pg .cta-inner {
        flex-direction: column;
        text-align: center;
        align-items: flex-start
    }
}

@media (max-width: 640px) {
    .intrvw-pg .pg-bound {
        padding: 0 20px
    }

    .intrvw-pg .ta-inner {
        flex-direction: column;
        min-height: unset
    }

    .intrvw-pg .ta-text {
        flex: none;
        padding: 32px 0 20px
    }

    .intrvw-pg .ta-img-zone {
        padding: 0 0 32px
    }

    .intrvw-pg .ta-h1 {
        font-size: 34px
    }

    .intrvw-pg .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .intrvw-pg .cta-inner {
        flex-direction: column;
        gap: 20px
    }

    .intrvw-pg .cta-text .ct-h2 {
        font-size: 24px
    }
}

@media (max-width: 360px) {
    .intrvw-pg .ta-h1 {
        font-size: 24px
    }

    .intrvw-pg .posts-area .sec-h2 {
        font-size: 24px
    }
}

.fst {
    background: #fff;
    overflow-x: hidden
}

.fst .db-row {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px
}

.fst .t-blk {
    background: #242424;
    padding-top: 64px;
    padding-bottom: 64px;
    position: relative
}

.fst .t-blk .dots-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.fst .t-blk .dots-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #00c8c42e 1px, transparent 1px);
    background-size: 28px 28px
}

.fst .t-blk .t-inner {
    position: relative;
    z-index: 1;
    max-width: 780px
}

.fst .t-blk .t-label {
    display: inline-block;
    font-size: 15px;
    letter-spacing: .16em;
    color: #00C8C4;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 600
}

.fst .t-blk .t-label::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #00C8C4;
    border-radius: 50%;
    margin-right: 12px;
    vertical-align: middle;
    animation: spin-dot 6s linear infinite
}

@keyframes spin-dot {
    0% {
        transform: rotate(0deg) scale(1)
    }

    50% {
        transform: rotate(180deg) scale(1.3)
    }

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

.fst .t-blk h1 {
    font-size: 64px;
    line-height: 1.2;
    color: #fff;
    letter-spacing: .01em;
    margin-bottom: 20px;
    font-weight: 800
}

.fst .t-blk h1 em {
    font-style: italic;
    color: #00C8C4;
    font-weight: 400
}

.fst .t-blk .t-sub {
    font-size: 20px;
    line-height: 1.6;
    color: #E3E3E3;
    max-width: 560px;
    letter-spacing: .01em
}

.fst .t-blk .t-diag {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 420px;
    pointer-events: none;
    overflow: hidden
}

.fst .t-blk .t-diag::after {
    content: '';
    position: absolute;
    top: -40px;
    right: 60px;
    width: 1px;
    height: 200%;
    background: linear-gradient(to bottom, transparent, #00c8c44d, transparent);
    transform: rotate(18deg);
    transform-origin: top center
}

.fst .cl-blk {
    background: #fff;
    padding-top: 64px;
    padding-bottom: 64px
}

.fst .cl-blk .sec-tag {
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #00C8C4;
    font-weight: 700;
    margin-bottom: 12px
}

.fst .cl-blk h2 {
    font-size: 34px;
    line-height: 1.2;
    color: #242424;
    font-weight: 800;
    letter-spacing: .01em;
    margin-bottom: 8px;
    text-transform: uppercase
}

.fst .cl-blk .cl-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    max-width: 480px;
    margin-bottom: 32px;
    letter-spacing: .01em
}

.fst .cl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.fst .cl-card {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 1px 7px 22px -2px #00c8c417;
    transition: box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1), transform .25s ease-in-out;
    position: relative;
    overflow: hidden
}

.fst .cl-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #00C8C4, transparent);
    border-radius: 18px 18px 0 0
}

.fst .cl-card:hover {
    box-shadow: 1px 9px 36px -2px #00c8c421;
    transform: translateY(-2px)
}

.fst .cl-card .cl-name {
    font-size: 15px;
    font-weight: 700;
    color: #242424;
    letter-spacing: .02em;
    margin-bottom: 8px
}

.fst .cl-card .cl-situation {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 12px;
    letter-spacing: .01em
}

.fst .cl-card .cl-out {
    font-size: 15px;
    line-height: 1.6;
    color: #00C8C4;
    font-weight: 600;
    letter-spacing: .01em
}

.fst .cl-img-col {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.fst .cl-img-wrap {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4/3
}

.fst .cl-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.88);
    transition: filter .4s cubic-bezier(0.4, 0, 0.2, 1)
}

.fst .cl-img-wrap:hover img {
    filter: brightness(1.05)
}

.fst .cl-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start
}

.fst .prob-blk {
    background: #242424;
    padding-top: 64px;
    padding-bottom: 64px;
    position: relative;
    overflow: hidden
}

.fst .prob-blk .prob-diag {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.fst .prob-blk .prob-diag::before {
    content: '';
    position: absolute;
    top: 20%;
    left: -60px;
    width: 1px;
    height: 140%;
    background: linear-gradient(to bottom, transparent, #00c8c433, transparent);
    transform: rotate(12deg)
}

.fst .prob-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center
}

.fst .prob-blk .sec-tag {
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #00C8C4;
    font-weight: 700;
    margin-bottom: 12px
}

.fst .prob-blk h2 {
    font-size: 34px;
    line-height: 1.2;
    color: #fff;
    font-weight: 800;
    letter-spacing: .01em;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center
}

.fst .prob-blk .prob-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #E3E3E3;
    letter-spacing: .01em;
    margin-bottom: 20px;
    text-align: center
}

.fst .prob-img-wrap {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4/3;
    position: relative
}

.fst .prob-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.75) saturate(0.9);
    transition: filter .45s cubic-bezier(0.4, 0, 0.2, 1)
}

.fst .prob-img-wrap:hover img {
    filter: brightness(0.95) saturate(1.1)
}

.fst .prob-img-wrap .img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #00c8c42e, transparent);
    mix-blend-mode: screen;
    pointer-events: none
}

.fst .prob-img-wrap:hover .grid-hover {
    opacity: 1
}

.fst .grid-hover {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#00c8c426 1px, transparent 1px), linear-gradient(90deg, #00c8c426 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0;
    transition: opacity .4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none
}

.fst .prob-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.fst .prob-list li {
    font-size: 16px;
    line-height: 1.6;
    color: #E3E3E3;
    padding: 12px 20px;
    background: #ffffff0d;
    border-radius: 10px;
    letter-spacing: .01em;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px
}

.fst .prob-list li .li-dot {
    width: 8px;
    height: 8px;
    background: #00C8C4;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px
}

.fst .out-blk {
    background: #E3E3E3;
    padding-top: 64px;
    padding-bottom: 64px
}

.fst .out-blk .sec-tag {
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #242424;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center
}

.fst .out-blk h2 {
    font-size: 34px;
    line-height: 1.2;
    color: #242424;
    font-weight: 800;
    letter-spacing: .01em;
    margin-bottom: 8px;
    text-transform: uppercase;
    text-align: center
}

.fst .out-blk .out-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    max-width: 560px;
    margin: 0 auto 32px;
    text-align: center;
    letter-spacing: .01em
}

.fst .out-metrics {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: stretch
}

.fst .out-metric-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.fst .metric-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 1px 1px 3px -2px #24242414;
    transition: box-shadow .28s ease-in-out
}

.fst .metric-row:hover {
    box-shadow: 1px 7px 22px -2px #00c8c417
}

.fst .metric-label {
    font-size: 15px;
    line-height: 1.6;
    color: #242424;
    flex: 1;
    letter-spacing: .01em
}

.fst .metric-bar-wrap {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.fst .metric-val {
    font-size: 15px;
    font-weight: 700;
    color: #00C8C4;
    text-align: right;
    letter-spacing: .01em
}

.fst .metric-bar-bg {
    height: 6px;
    background: #E3E3E3;
    border-radius: 6px;
    overflow: hidden
}

.fst .metric-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #00C8C4, #242424);
    border-radius: 6px
}

.fst .out-img-col {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.fst .out-img-wrap {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4/3
}

.fst .out-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.88);
    transition: filter .38s cubic-bezier(0.4, 0, 0.2, 1)
}

.fst .out-img-wrap:hover img {
    filter: brightness(1.06)
}

.fst .out-img-wrap:hover .grid-hover {
    opacity: 1
}

.fst .out-img-wrap {
    position: relative
}

.fst .who-blk {
    background: #fff;
    padding-top: 64px;
    padding-bottom: 64px
}

.fst .who-blk .sec-tag {
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #00C8C4;
    font-weight: 700;
    margin-bottom: 12px
}

.fst .who-blk h2 {
    font-size: 34px;
    line-height: 1.2;
    color: #242424;
    font-weight: 800;
    letter-spacing: .01em;
    margin-bottom: 20px;
    text-transform: uppercase
}

.fst .who-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 32px;
    align-items: start
}

.fst .who-img-wrap {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4/3;
    position: relative
}

.fst .who-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.85);
    transition: filter .42s cubic-bezier(0.4, 0, 0.2, 1)
}

.fst .who-img-wrap:hover img {
    filter: brightness(1.05)
}

.fst .who-img-wrap:hover .grid-hover {
    opacity: 1
}

.fst .who-profiles {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.fst .who-profile {
    padding: 20px 32px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 1px 7px 22px -2px #24242417;
    transition: box-shadow .32s ease-in-out, transform .22s ease-in-out
}

.fst .who-profile:hover {
    box-shadow: 1px 9px 36px -2px #00c8c421;
    transform: translateX(4px)
}

.fst .who-profile .wp-name {
    font-size: 16px;
    font-weight: 700;
    color: #242424;
    margin-bottom: 8px;
    letter-spacing: .01em
}

.fst .who-profile .wp-ctx {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    letter-spacing: .01em
}

.fst .who-profile .wp-result {
    font-size: 15px;
    line-height: 1.6;
    color: #00C8C4;
    font-weight: 600;
    margin-top: 8px;
    letter-spacing: .01em
}

.fst .rot-deco {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #00C8C4;
    border-radius: 6px;
    margin-right: 12px;
    vertical-align: middle;
    animation: rot-loop 9s linear infinite
}

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

    to {
        transform: rotate(360deg)
    }
}

@media (max-width: 1024px) {
    .fst .cl-layout {
        grid-template-columns: 1fr
    }

    .fst .cl-img-col {
        display: none
    }

    .fst .prob-layout {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .fst .out-metrics {
        flex-direction: column
    }

    .fst .out-img-col {
        width: 100%
    }

    .fst .who-layout {
        grid-template-columns: 1fr
    }

    .fst .who-img-wrap {
        display: none
    }

    .fst .t-blk h1 {
        font-size: 48px
    }

    .fst .t-blk .t-diag {
        display: none
    }
}

@media (max-width: 640px) {
    .fst .db-row {
        padding-left: 20px;
        padding-right: 20px
    }

    .fst .t-blk {
        padding-top: 32px;
        padding-bottom: 32px
    }

    .fst .t-blk h1 {
        font-size: 34px
    }

    .fst .t-blk .t-sub {
        font-size: 16px
    }

    .fst .cl-grid {
        grid-template-columns: 1fr
    }

    .fst .cl-blk,
    .fst .prob-blk,
    .fst .out-blk,
    .fst .who-blk {
        padding-top: 32px;
        padding-bottom: 32px
    }

    .fst .metric-bar-wrap {
        width: 80px
    }

    .fst .who-profile {
        padding: 20px
    }
}

@media (max-width: 360px) {
    .fst .t-blk h1 {
        font-size: 24px
    }

    .fst .cl-blk h2,
    .fst .prob-blk h2,
    .fst .out-blk h2,
    .fst .who-blk h2 {
        font-size: 24px
    }
}

.abt-us {
    background: #fff;
    overflow-x: clip
}

.abt-us .tm-block {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 560px;
    background: #242424
}

.abt-us .tm-img-zone {
    flex: 0 0 52%;
    position: relative;
    overflow: hidden
}

.abt-us .tm-img-zone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.abt-us .tm-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #00c8c42e 0%, #242424b8 100%)
}

.abt-us .tm-edge-line {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: #00C8C4;
    z-index: 2
}

.abt-us .tm-txt-zone {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 64px 64px 48px;
    position: relative;
    z-index: 1
}

.abt-us .tm-eyebrow {
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #00C8C4;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2
}

.abt-us .tm-h1 {
    font-size: 64px;
    line-height: 1.2;
    color: #fff;
    font-weight: 800;
    letter-spacing: .01em;
    margin-bottom: 20px
}

.abt-us .tm-h1 em {
    font-style: italic;
    color: #00C8C4
}

.abt-us .tm-num-accent {
    font-size: 48px;
    font-weight: 900;
    color: #00C8C4;
    line-height: 1.2;
    letter-spacing: .02em;
    margin-bottom: 12px;
    display: block
}

.abt-us .tm-desc {
    font-size: 16px;
    line-height: 1.9;
    color: #E3E3E3;
    letter-spacing: .01em;
    max-width: 400px;
    margin-bottom: 0
}

.abt-us .tm-deco-lines {
    position: absolute;
    bottom: 32px;
    left: 32px;
    width: 80px;
    height: 80px;
    pointer-events: none
}

.abt-us .tm-deco-lines svg {
    width: 100%;
    height: 100%;
    opacity: .13
}

.abt-us .story-block {
    background: #fff;
    padding: 64px 0;
    position: relative
}

.abt-us .story-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 64px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px;
    align-items: start
}

.abt-us .story-txt-col {
    grid-column: 1 / 3;
    padding-right: 32px
}

.abt-us .story-img-col {
    grid-column: 3 / 5;
    position: relative
}

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

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

.abt-us .story-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 2px solid transparent;
    transition: border-color .25s ease-in-out;
    pointer-events: none
}

.abt-us .story-img-wrap:hover::after {
    border-color: #00C8C4
}

.abt-us .story-img-wrap:hover img {
    transform: scale(1.03)
}

.abt-us .story-label {
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #00C8C4;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2
}

.abt-us .story-h2 {
    font-size: 34px;
    font-weight: 800;
    color: #242424;
    line-height: 1.2;
    letter-spacing: .01em;
    margin-bottom: 20px;
    text-transform: uppercase
}

.abt-us .story-p {
    font-size: 16px;
    line-height: 1.9;
    color: #444;
    letter-spacing: .01em;
    margin-bottom: 20px
}

.abt-us .story-wave-div {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: 64px
}

.abt-us .story-wave-div svg {
    display: block;
    width: 100%
}

.abt-us .team-block {
    background: #f5fffe;
    padding: 64px 0;
    position: relative;
    animation: desat-sat 8s ease-in-out infinite alternate
}

@keyframes desat-sat {
    0% {
        filter: saturate(1)
    }

    50% {
        filter: saturate(0.55)
    }

    100% {
        filter: saturate(1)
    }
}

.abt-us .team-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 64px
}

.abt-us .team-head {
    text-align: center;
    margin-bottom: 48px
}

.abt-us .team-label {
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #00C8C4;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2
}

.abt-us .team-h2 {
    font-size: 34px;
    font-weight: 800;
    color: #242424;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-bottom: 12px
}

.abt-us .team-sub {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    max-width: 560px;
    margin: 0 auto;
    letter-spacing: .01em
}

.abt-us .team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px
}

.abt-us .team-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 1px 7px 22px -2px #00c8c417;
    transition: box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1), transform .28s ease-in-out
}

.abt-us .team-card:hover {
    box-shadow: 1px 9px 36px -2px #00c8c421;
    transform: translateY(-4px)
}

.abt-us .team-card-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative
}

.abt-us .team-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-us .team-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    transition: border-color .25s ease-in-out;
    pointer-events: none
}

.abt-us .team-card:hover .team-card-img::after {
    border-color: #00C8C4
}

.abt-us .team-card:hover .team-card-img img {
    transform: scale(1.04)
}

.abt-us .team-card-body {
    padding: 20px 20px 32px
}

.abt-us .team-card-name {
    font-size: 20px;
    font-weight: 700;
    color: #242424;
    line-height: 1.2;
    letter-spacing: .01em;
    margin-bottom: 8px
}

.abt-us .team-card-role {
    font-size: 15px;
    color: #00C8C4;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 12px;
    line-height: 1.2
}

.abt-us .team-card-bio {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    letter-spacing: .01em
}

.abt-us .timeline-block {
    background: #242424;
    padding: 64px 0;
    position: relative;
    overflow: hidden
}

.abt-us .tl-deco {
    position: absolute;
    top: 32px;
    right: 32px;
    pointer-events: none;
    opacity: .07
}

.abt-us .tl-deco svg {
    width: 120px;
    height: 120px
}

.abt-us .tl-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 64px
}

.abt-us .tl-head {
    margin-bottom: 48px
}

.abt-us .tl-label {
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #00C8C4;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2
}

.abt-us .tl-h2 {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-bottom: 0
}

.abt-us .tl-periods {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.abt-us .tl-period {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: start
}

.abt-us .tl-period-label {
    font-size: 24px;
    font-weight: 900;
    color: #00C8C4;
    line-height: 1.2;
    letter-spacing: .02em;
    padding-top: 4px
}

.abt-us .tl-events {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.abt-us .tl-event {
    background: #ffffff0d;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    transition: background .3s ease-in-out
}

.abt-us .tl-event:hover {
    background: #00c8c41a
}

.abt-us .tl-event-year {
    font-size: 15px;
    font-weight: 700;
    color: #00C8C4;
    letter-spacing: .08em;
    margin-bottom: 8px;
    line-height: 1.2
}

.abt-us .tl-event-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: .01em;
    margin-bottom: 8px
}

.abt-us .tl-event-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #aaa;
    letter-spacing: .01em
}

.abt-us .tl-dot-div {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-bottom: 48px
}

@media (max-width: 1024px) {
    .abt-us .tm-block {
        flex-direction: column;
        min-height: unset
    }

    .abt-us .tm-img-zone {
        flex: 0 0 320px;
        height: 320px
    }

    .abt-us .tm-txt-zone {
        padding: 48px 32px
    }

    .abt-us .tm-h1 {
        font-size: 48px
    }

    .abt-us .story-inner {
        grid-template-columns: 1fr 1fr;
        padding: 0 32px
    }

    .abt-us .story-txt-col {
        grid-column: 1 / 2;
        padding-right: 0
    }

    .abt-us .story-img-col {
        grid-column: 2 / 3
    }

    .abt-us .team-inner {
        padding: 0 32px
    }

    .abt-us .team-grid {
        grid-template-columns: 1fr 1fr
    }

    .abt-us .tl-inner {
        padding: 0 32px
    }

    .abt-us .tl-period {
        grid-template-columns: 120px 1fr
    }
}

@media (max-width: 640px) {
    .abt-us .tm-img-zone {
        height: 220px
    }

    .abt-us .tm-txt-zone {
        padding: 32px 20px
    }

    .abt-us .tm-h1 {
        font-size: 34px
    }

    .abt-us .tm-num-accent {
        font-size: 34px
    }

    .abt-us .story-inner {
        grid-template-columns: 1fr;
        padding: 0 20px
    }

    .abt-us .story-txt-col {
        grid-column: 1 / 2
    }

    .abt-us .story-img-col {
        grid-column: 1 / 2
    }

    .abt-us .team-inner {
        padding: 0 20px
    }

    .abt-us .team-grid {
        grid-template-columns: 1fr
    }

    .abt-us .tl-inner {
        padding: 0 20px
    }

    .abt-us .tl-period {
        grid-template-columns: 1fr;
        gap: 12px
    }
}

@media (max-width: 360px) {
    .abt-us .tm-h1 {
        font-size: 24px
    }

    .abt-us .story-h2,
    .abt-us .team-h2,
    .abt-us .tl-h2 {
        font-size: 24px
    }
}

.abt-us .icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 48px;
    background: #00C8C4;
    box-shadow: 1px 1px 3px -2px #00c8c414 0 0 0 4px #00c8c42e;
    margin-bottom: 12px
}

.abt-us .icon-circle svg {
    width: 24px;
    height: 24px;
    fill: #fff
}

.success-pg {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 20px;
    background: #fff
}

.success-pg .result-wrap {
    max-width: 560px;
    width: 100%;
    text-align: center;
    padding: 64px 32px;
    border-radius: 18px;
    box-shadow: 1px 7px 22px -2px #00c8c417;
    background: #fff
}

.success-pg .icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 48px;
    background: linear-gradient(to top, #00C8C4, #00c8c426);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px
}

.success-pg .icon-wrap svg {
    width: 36px;
    height: 36px;
    display: block
}

.success-pg .result-title {
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: .01em;
    color: #242424;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 12px
}

.success-pg .result-sub {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: .02em;
    color: #242424;
    opacity: .72;
    margin: 0 0 32px
}

.success-pg .divider-line {
    width: 48px;
    height: 3px;
    border-radius: 6px;
    background: #00C8C4;
    margin: 0 auto 32px
}

.success-pg .result-note {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: .01em;
    color: #242424;
    opacity: .6;
    margin: 0 0 32px
}

.success-pg .back-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 10px;
    background: #00C8C4;
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: .02em;
    font-weight: 600;
    text-decoration: none;
    text-transform: lowercase;
    border: none;
    cursor: pointer;
    transition: opacity .25s ease-in-out, box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 1px 1px 3px -2px #00c8c414
}

.success-pg .back-btn:hover {
    opacity: .88;
    box-shadow: 1px 9px 36px -2px #00c8c421
}

.success-pg .back-btn:focus {
    outline: 2px solid #242424;
    outline-offset: 4px
}

.success-pg .back-btn:active {
    opacity: .75
}

@media (max-width: 640px) {
    .success-pg {
        padding: 32px 12px
    }

    .success-pg .result-wrap {
        padding: 32px 20px
    }

    .success-pg .result-title {
        font-size: 24px
    }
}