@import "https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@latest/700.css";

html {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    margin: 0;
    -webkit-text-size-adjust: 100%;
    font-family: 'DM Sans', sans-serif;
    background-color: #18120e;
    color: #e8ddd4;
    overflow-x: hidden
}

.topbar {
    width: 100%;
    background: linear-gradient(90deg, #761224 0%, #3a0a10 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 48px;
    height: 40px;
    gap: 24px
}

.topbar-contact {
    display: flex;
    align-items: center;
    gap: 24px
}

.topbar-link {
    color: #e8ddd4;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    opacity: .85;
    transition: opacity .1s ease-out
}

.topbar-link:hover {
    opacity: 1
}

.sitehead {
    position: relative;
    width: 100%;
    background: linear-gradient(160deg, #1e1510 0%, #12090d 60%, #0e1118 100%);
    border-bottom: 1px solid #76122459;
    box-shadow: 0 4px 25px -2px #7612241a;
    overflow: hidden
}

.sitehead::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 100%;
    background: linear-gradient(90deg, #7612242e 0%, transparent 100%);
    pointer-events: none
}

.sitehead::after {
    content: "";
    position: absolute;
    top: -48px;
    right: 96px;
    width: 180px;
    height: 180px;
    border-radius: 48px;
    background: #45a9ef0a;
    pointer-events: none
}

.headbox {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 48px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 8px 48px;
    align-items: center
}

.brandbox {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px;
    background: #faa7000f;
    border: 1px solid #faa7002e;
    border-radius: 13px;
    box-shadow: 0 1px 2px -2px #faa7000f 0 4px 25px -2px #faa7001a;
    text-decoration: none
}

.brandbox img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    flex-shrink: 0
}

.brandname {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: #e8ddd4;
    white-space: nowrap
}

.brandname span {
    color: #FAA700
}

.tagline {
    grid-column: 2;
    grid-row: 1;
    font-size: 16px;
    line-height: 1.2;
    color: #45A9EF;
    letter-spacing: .04em;
    font-weight: 400;
    text-transform: uppercase
}

.headnav {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

.headnav a {
    font-size: 16px;
    line-height: 1.2;
    color: #e8ddd4;
    text-decoration: none;
    padding: 8px 24px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background .12s ease-out, border-color .1s ease-out, color .1s linear;
    white-space: nowrap
}

.headnav a:hover {
    background: #76122438;
    border-color: #76122480;
    color: #FAA700
}

.headnav a:focus-visible {
    outline: 2px dashed #FAA700;
    outline-offset: 3px;
    animation: dashspin 3s linear infinite
}

@keyframes dashspin {
    to {
        outline-offset: 5px
    }
}

.headnav a[data-current="true"] {
    background: #76122459;
    border-color: #76122499;
    color: #FAA700
}

@media (max-width: 1024px) {
    .headbox {
        padding: 24px;
        gap: 8px 24px
    }

    .topbar {
        padding: 0 24px
    }
}

@media (max-width: 768px) {
    .headbox {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 24px;
        gap: 8px
    }

    .brandbox {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        justify-self: start
    }

    .tagline {
        grid-column: 1;
        grid-row: 2
    }

    .headnav {
        grid-column: 1;
        grid-row: 3
    }

    .topbar {
        justify-content: center;
        flex-wrap: wrap;
        height: auto;
        padding: 8px 24px;
        gap: 8px
    }
}

@media (max-width: 480px) {
    .brandname {
        font-size: 18px
    }

    .headnav a {
        padding: 8px;
        font-size: 16px
    }
}

.sitefooter {
    background: linear-gradient(170deg, #14100d 0%, #0f0c10 100%);
    border-top: 1px solid #7612244d;
    box-shadow: inset 0 8px 36px -2px #7612241c;
    padding: 48px 0 0
}

.footgrid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px
}

.footcol {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.footcolhead {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FAA700;
    padding-bottom: 8px;
    border-bottom: 1px solid #faa70033
}

.footbrand {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px;
    background: #faa7000d;
    border: 1px solid #faa70024;
    border-radius: 13px;
    box-shadow: 0 1px 2px -2px #faa7000f;
    align-self: flex-start
}

.footbrand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block
}

.footbrandname {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #e8ddd4
}

.footbrandname span {
    color: #FAA700
}

.footaddr {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a89a;
    font-style: normal
}

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

.footcontact {
    font-size: 16px;
    line-height: 1.2;
    color: #b8a89a;
    text-decoration: none;
    transition: color .1s ease-out
}

.footcontact:hover {
    color: #45A9EF
}

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

.footlink {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a89a;
    text-decoration: none;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: color .12s linear, border-color .1s ease-out, background .1s ease-out
}

.footlink:hover {
    color: #e8ddd4;
    background: #76122426;
    border-color: #7612244d
}

.footlink:focus-visible {
    outline: 2px dashed #FAA700;
    outline-offset: 3px;
    animation: dashspin 3s linear infinite
}

.footdivider {
    max-width: 1400px;
    margin: 48px auto 0;
    padding: 0 48px;
    border-top: 1px solid #ffffff0d
}

.footbottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px
}

.footcopy {
    font-size: 16px;
    line-height: 1.2;
    color: #6a5a52
}

.footpolicy {
    display: flex;
    gap: 24px;
    flex-wrap: wrap
}

.footpolicylink {
    font-size: 16px;
    line-height: 1.2;
    color: #6a5a52;
    text-decoration: none;
    transition: color .1s ease-out
}

.footpolicylink:hover {
    color: #b8a89a
}

@media (max-width: 1024px) {
    .footgrid {
        padding: 0 24px;
        grid-template-columns: 1fr 1fr;
        gap: 48px 24px
    }

    .footdivider {
        padding: 0 24px
    }

    .footbottom {
        padding: 24px
    }
}

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

@media (max-width: 480px) {
    .footgrid {
        padding: 0 24px
    }

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

.cookiebar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 8000;
    background: #1e1510;
    border-top: 1px solid #76122473;
    box-shadow: 0 -4px 25px -2px #7612241a
}

.cookieinner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap
}

.cookietext {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a89a;
    flex: 1;
    min-width: 200px
}

.cookieactions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    flex-wrap: wrap
}

.cookieaccept {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #18120e;
    background: #FAA700;
    border: 2px solid #FAA700;
    border-radius: 8px;
    padding: 8px 24px;
    cursor: pointer;
    transition: background .12s ease-out, border-color .12s ease-out;
    min-height: 44px
}

.cookieaccept:hover {
    background: #d48f00;
    border-color: #d48f00
}

.cookieaccept:focus-visible {
    outline: 2px dashed #FAA700;
    outline-offset: 3px;
    animation: dashspin 3s linear infinite
}

.cookiedecline {
    font-size: 16px;
    line-height: 1.2;
    color: #b8a89a;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 8px;
    min-height: 44px;
    transition: color .1s ease-out
}

.cookiedecline:hover {
    color: #e8ddd4
}

.cookiedecline:focus-visible {
    outline: 2px dashed #FAA700;
    outline-offset: 3px;
    animation: dashspin 3s linear infinite
}

@media (max-width: 768px) {
    .cookieinner {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start
    }

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

.doc-area-hp {
    max-width: 1400px;
    margin: 0 auto;
    padding: 96px 48px;
    background: #1b1210;
    color: #d9cfc9;
    min-height: 100vh
}

.doc-area-hp h1 {
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: #f0e6df;
    margin: 0 0 48px;
    padding-bottom: 24px;
    border-bottom: 2px solid #761224
}

.doc-area-hp h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #edddd4;
    margin: 48px 0 24px
}

.doc-area-hp h3 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #e5d4c8;
    margin: 48px 0 24px
}

.doc-area-hp h4 {
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: -.01em;
    color: #ddc9bb;
    margin: 24px 0 8px;
    text-transform: uppercase
}

.doc-area-hp h5 {
    font-size: 16px;
    line-height: 1.8;
    color: #c9b8aa;
    margin: 24px 0 8px;
    text-transform: uppercase;
    letter-spacing: .05em
}

.doc-area-hp h6 {
    font-size: 16px;
    line-height: 1.8;
    color: #b5a496;
    margin: 24px 0 8px;
    letter-spacing: .03em
}

.doc-area-hp p {
    font-size: 18px;
    line-height: 1.8;
    color: #c4b5a8;
    margin: 0 0 24px;
    max-width: 72ch
}

.doc-area-hp em,
.doc-area-hp i {
    color: #FAA700;
    font-style: italic
}

.doc-area-hp div {
    margin: 24px 0
}

.doc-area-hp table {
    width: 100%;
    border-collapse: collapse;
    margin: 48px 0;
    font-size: 16px;
    line-height: 1.8;
    background: #221815;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 1px 2px -2px #7612240f 0 4px 25px -2px #7612241a 0 8px 36px -2px #7612241c
}

.doc-area-hp thead {
    background: #761224
}

.doc-area-hp thead th {
    color: #f5e8e0;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 24px;
    text-align: left;
    font-weight: 700;
    border: none
}

.doc-area-hp tbody tr {
    border-bottom: 1px solid #2e1f1a;
    transition: background .08s ease-out
}

.doc-area-hp tbody tr:last-child {
    border-bottom: none
}

.doc-area-hp tbody tr:hover {
    background: #2a1a15
}

.doc-area-hp td {
    padding: 24px;
    color: #c4b5a8;
    vertical-align: top;
    border: none
}

.doc-area-hp th {
    padding: 24px;
    text-align: left
}

@media (max-width: 1024px) {
    .doc-area-hp {
        padding: 96px 48px
    }
}

@media (max-width: 768px) {
    .doc-area-hp {
        padding: 48px 24px
    }

    .doc-area-hp h1 {
        font-size: 40px
    }

    .doc-area-hp h2 {
        font-size: 28px
    }

    .doc-area-hp h3 {
        font-size: 28px
    }

    .doc-area-hp table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width: 480px) {
    .doc-area-hp {
        padding: 48px 24px
    }

    .doc-area-hp h1 {
        font-size: 28px
    }

    .doc-area-hp h2 {
        font-size: 28px
    }

    .doc-area-hp p {
        font-size: 16px
    }

    .doc-area-hp td,
    .doc-area-hp thead th {
        padding: 8px
    }
}

.testim {
    background-color: #1a0a0e;
    color: #e8ddd0;
    overflow-x: clip;
    position: relative
}

.testim .pgbanner {
    position: relative;
    padding: 96px 24px 48px;
    overflow: hidden
}

.testim .pgbanner-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px
}

.testim .pgbanner-txt {
    position: relative;
    z-index: 2;
    text-align: right
}

.testim .pgbanner-label {
    display: inline-block;
    background: #761224;
    color: #e8ddd0;
    font-size: 16px;
    line-height: 1.2;
    padding: 8px 24px;
    border-radius: 8px;
    margin-bottom: 24px;
    letter-spacing: .04em
}

.testim .pgbanner-h1 {
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: #e8ddd0;
    margin: 0 0 24px
}

.testim .pgbanner-h1 span {
    color: #FAA700
}

.testim .pgbanner-desc {
    font-size: 18px;
    line-height: 1.8;
    color: #b8a898;
    max-width: 480px;
    margin-left: auto
}

.testim .pgbanner-imgside {
    position: relative
}

.testim .pgbanner-imgframe {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 8px 36px -2px #7612241c
}

.testim .pgbanner-imgframe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.2);
    display: block
}

.testim .pgbanner-shape1 {
    position: absolute;
    top: -24px;
    right: -24px;
    width: 120px;
    height: 120px;
    border-radius: 36px;
    background: #faa70014;
    border: 2px solid #faa7002e;
    z-index: 1;
    pointer-events: none
}

.testim .pgbanner-shape2 {
    position: absolute;
    bottom: 24px;
    left: -48px;
    width: 80px;
    height: 80px;
    border-radius: 22px;
    background: #45a9ef12;
    border: 2px solid #45a9ef26;
    z-index: 1;
    pointer-events: none
}

.testim .pgbanner-shape3 {
    position: absolute;
    top: 50%;
    left: -16px;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #7612241f;
    z-index: 1;
    pointer-events: none
}

.testim .pgbanner-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(97deg, #7612242e 0%, #1a0a0e00 60%);
    pointer-events: none;
    z-index: 0
}

.testim .pgbanner-motif {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    pointer-events: none
}

.testim .pgbanner-motif::before {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(97deg, #761224, #45A9EF);
    opacity: .4
}

.testim .pgbanner-motif::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 3px;
    background: linear-gradient(97deg, #FAA700, #761224);
    opacity: .25
}

.testim .revgrid {
    padding: 96px 24px;
    position: relative
}

.testim .revgrid-inner {
    max-width: 1400px;
    margin: 0 auto
}

.testim .revgrid-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
    align-items: start
}

.testim .revgrid-heading {
    position: relative
}

.testim .revgrid-h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #e8ddd0;
    margin: 0 0 8px;
    display: inline-block;
    background: #faa7001f;
    padding: 8px 24px;
    border-radius: 8px
}

.testim .revgrid-sub {
    font-size: 18px;
    line-height: 1.8;
    color: #b8a898;
    margin: 24px 0 0
}

.testim .revgrid-meta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-end;
    text-align: right
}

.testim .revgrid-stat {
    font-size: 72px;
    line-height: 1.2;
    letter-spacing: -.04em;
    font-weight: 700
}

.testim .revgrid-stat .intpart {
    color: #FAA700
}

.testim .revgrid-stat .fracpart {
    color: #45A9EF;
    font-size: 40px
}

.testim .revgrid-statlabel {
    font-size: 16px;
    line-height: 1.2;
    color: #b8a898;
    margin-top: -16px
}

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

.testim .revcard {
    background: #2a1218;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 4px 25px -2px #7612241a inset 0 2px 8px 0 #0000002e;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: box-shadow .12s ease-out;
    cursor: default
}

.testim .revcard:hover {
    box-shadow: 0 8px 36px -2px #7612242e inset 0 2px 8px 0 #00000038
}

.testim .revcard-stars {
    display: flex;
    flex-direction: row;
    gap: 8px
}

.testim .revcard-star {
    width: 18px;
    height: 18px
}

.testim .revcard-star svg {
    width: 18px;
    height: 18px
}

.testim .revcard-body {
    font-size: 16px;
    line-height: 1.8;
    color: #c8b8a8;
    flex: 1
}

.testim .revcard-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px
}

.testim .revcard-avatar {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 1px 2px -2px #7612240f
}

.testim .revcard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.15);
    display: block
}

.testim .revcard-avatarfallback {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0
}

.testim .revcard-name {
    font-size: 16px;
    line-height: 1.2;
    color: #e8ddd0;
    font-weight: 600
}

.testim .revcard-role {
    font-size: 16px;
    line-height: 1.2;
    color: #b8a898;
    margin-top: 8px
}

.testim .revcard-badge {
    display: inline-block;
    background: #faa7001f;
    color: #FAA700;
    font-size: 16px;
    line-height: 1.2;
    padding: 8px 24px;
    border-radius: 8px;
    margin-top: 8px
}

.testim .revcard-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px
}

.testim .revcard-checkitem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 1.8;
    color: #c8b8a8
}

.testim .revcard-checkitem svg {
    flex-shrink: 0
}

.testim .revcard big {
    font-size: 28px;
    line-height: 1.2;
    color: #FAA700;
    font-weight: 700;
    display: block;
    margin-bottom: 8px
}

.testim .revgrid-divider {
    margin: 48px 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.testim .revgrid-divider span {
    display: block;
    height: 1px
}

.testim .revgrid-divider span:first-child {
    background: linear-gradient(97deg, #761224, #45A9EF);
    opacity: .35
}

.testim .revgrid-divider span:last-child {
    background: linear-gradient(97deg, #FAA700, #761224);
    opacity: .2
}

.testim .revgrid-bgaccent {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, #45a9ef0a 0%, #1a0a0e00 70%);
    pointer-events: none;
    z-index: 0
}

.testim .revgrid-inner {
    position: relative;
    z-index: 1
}

.testim .revcard-cycle {
    animation: cardcycle 4.5s ease-out infinite
}

.testim .revcard-cycle2 {
    animation: cardcycle 4.5s ease-out 1.5s infinite
}

.testim .revcard-cycle3 {
    animation: cardcycle 4.5s ease-out 3s infinite
}

@keyframes cardcycle {

    0%,
    100% {
        box-shadow: 0 4px 25px -2px #7612241a inset 0 2px 8px 0 #0000002e
    }

    16%,
    28% {
        box-shadow: 0 8px 36px -2px #faa7002e inset 0 2px 8px 0 #00000038
    }
}

.testim .pgbanner-bgpan {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0
}

.testim .pgbanner-bgpan-img {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    object-fit: cover;
    opacity: .06;
    filter: grayscale(1);
    animation: bgpan 28s linear infinite
}

@keyframes bgpan {
    0% {
        transform: translateX(0)
    }

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

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

    .testim .pgbanner-h1 {
        font-size: 40px
    }
}

@media (max-width: 768px) {
    .testim .pgbanner-inner {
        grid-template-columns: 1fr
    }

    .testim .pgbanner-imgside {
        display: none
    }

    .testim .pgbanner-txt {
        text-align: left
    }

    .testim .pgbanner-desc {
        margin-left: 0
    }

    .testim .revgrid-top {
        grid-template-columns: 1fr
    }

    .testim .revgrid-meta {
        align-items: flex-start;
        text-align: left
    }

    .testim .revgrid-cards {
        grid-template-columns: 1fr
    }

    .testim .pgbanner-h1 {
        font-size: 40px
    }
}

@media (max-width: 480px) {
    .testim .pgbanner {
        padding: 48px 24px
    }

    .testim .pgbanner-h1 {
        font-size: 28px
    }

    .testim .revgrid-h2 {
        font-size: 28px
    }

    .testim .revgrid-stat {
        font-size: 56px
    }
}

.aboutus {
    background: #1a0a0e;
    color: #e8d5c0;
    overflow-x: clip;
    position: relative
}

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

.aboutus .pgwrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px
}

.aboutus .ldscript {
    display: none
}

.aboutus .titblk {
    padding: 96px 0 48px;
    position: relative
}

.aboutus .titblk .pgwrap {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    align-items: center
}

.aboutus .imgcol {
    position: relative
}

.aboutus .imgcol figure {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 8px 36px -2px #7612241c
}

.aboutus .imgcol figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.aboutus .imgcol .glowring {
    position: absolute;
    top: -24px;
    left: -24px;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    border-radius: 36px;
    border: 1px solid #faa7002e;
    pointer-events: none
}

.aboutus .imgcol .glowring2 {
    position: absolute;
    top: -8px;
    left: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    border-radius: 22px;
    border: 1px solid #45a9ef1f;
    pointer-events: none
}

.aboutus .txtcol {
    padding: 48px 48px 48px 24px
}

.aboutus .numaccent {
    font-size: 72px;
    line-height: 1.2;
    font-weight: 900;
    color: #FAA700;
    letter-spacing: -3px;
    display: block;
    margin-bottom: 8px
}

.aboutus .titstrip {
    display: inline-block;
    background: #761224;
    padding: 8px 24px;
    border-radius: 8px;
    margin-bottom: 24px
}

.aboutus .titstrip h1 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #e8d5c0;
    margin: 0
}

.aboutus .txtcol p {
    font-size: 18px;
    line-height: 1.8;
    color: #c4a882;
    margin: 0 0 24px
}

.aboutus .txtcol p:last-child {
    margin-bottom: 0
}

.aboutus .shapelayer {
    position: absolute;
    top: 48px;
    right: 0;
    width: 200px;
    height: 200px;
    border-radius: 48px;
    background: #7612240f;
    transform: rotate(18deg);
    pointer-events: none
}

.aboutus .shapelayer2 {
    position: absolute;
    bottom: 0;
    left: 8px;
    width: 120px;
    height: 120px;
    border-radius: 36px;
    background: #45a9ef0d;
    transform: rotate(-12deg);
    pointer-events: none
}

.aboutus .divline {
    height: 1px;
    background: linear-gradient(97deg, transparent, #FAA700, transparent);
    margin: 0;
    border: none
}

.aboutus .pillarsblk {
    padding: 96px 0;
    background: #200d12;
    position: relative
}

.aboutus .pillarsblk .dotgrid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #faa70014 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 14px 14px;
    pointer-events: none;
    border-radius: 0;
    overflow: hidden
}

.aboutus .pillarsblk .pgwrap {
    position: relative
}

.aboutus .secstrip {
    display: inline-block;
    background: #7612248c;
    padding: 8px 24px;
    border-radius: 8px;
    margin-bottom: 48px
}

.aboutus .secstrip h2 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.5px;
    color: #e8d5c0;
    margin: 0
}

.aboutus .cardgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.aboutus .pilcard {
    background: #2a0f16;
    border-radius: 22px;
    padding: 48px 24px 24px;
    box-shadow: inset 0 1px 2px -2px #7612240f 0 4px 25px -2px #7612241a;
    border: 1px solid #faa70014;
    position: relative;
    transition: border-color .12s ease-out
}

.aboutus .pilcard:hover {
    border-color: #faa70038
}

.aboutus .pilcard .cardnum {
    font-size: 56px;
    line-height: 1.2;
    font-weight: 900;
    color: #faa7002e;
    letter-spacing: -2px;
    position: absolute;
    top: 8px;
    right: 24px
}

.aboutus .pilcard .iconwrap {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    position: relative
}

.aboutus .pilcard .iconwrap svg {
    width: 48px;
    height: 48px
}

.aboutus .pilcard .outline {
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: traceout 1.4s .6s ease-out forwards
}

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

.aboutus .pilcard:nth-child(2) .outline {
    animation-delay: .9s
}

.aboutus .pilcard:nth-child(3) .outline {
    animation-delay: 1.2s
}

.aboutus .pilcard h4 {
    font-size: 18px;
    line-height: 1.2;
    color: #e8d5c0;
    margin: 0 0 8px;
    letter-spacing: -.3px
}

.aboutus .pilcard p {
    font-size: 16px;
    line-height: 1.8;
    color: #9a7a62;
    margin: 0
}

.aboutus .wavegrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.aboutus .wavegrid .pilcard {
    opacity: 0;
    transform: translateY(24px);
    animation: waveappear .5s ease-out forwards
}

.aboutus .wavegrid .pilcard:nth-child(1) {
    animation-delay: .1s
}

.aboutus .wavegrid .pilcard:nth-child(2) {
    animation-delay: .22s
}

.aboutus .wavegrid .pilcard:nth-child(3) {
    animation-delay: .34s
}

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

.aboutus .divline2 {
    height: 1px;
    background: linear-gradient(97deg, transparent, #45A9EF, transparent);
    margin: 0;
    border: none
}

.aboutus .anchorblk {
    padding: 96px 0;
    background: #160810
}

.aboutus .anchorblk .pgwrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: start
}

.aboutus .anchorcenter {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.aboutus .bigvis {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 8px 36px -2px #7612241c;
    position: relative
}

.aboutus .bigvis img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.aboutus .bigvis .visglow {
    position: absolute;
    inset: 0;
    background: linear-gradient(97deg, #76122438, transparent 60%);
    pointer-events: none
}

.aboutus .metarow {
    display: flex;
    flex-direction: row;
    gap: 24px
}

.aboutus .metacard {
    flex: 1;
    background: #2a0f16;
    border-radius: 13px;
    padding: 24px;
    border: 1px solid #45a9ef1a;
    box-shadow: inset 0 1px 2px -2px #7612240f;
    text-align: right
}

.aboutus .metacard .mlabel {
    font-size: 16px;
    line-height: 1.8;
    color: #9a7a62;
    display: block;
    margin-bottom: 8px
}

.aboutus .metacard .mval {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 900;
    color: #45A9EF;
    letter-spacing: -1.5px;
    display: block
}

.aboutus .anchorcenter .secstrip2 {
    display: inline-block;
    background: #45a9ef1f;
    padding: 8px 24px;
    border-radius: 8px;
    border: 1px solid #45a9ef33
}

.aboutus .anchorcenter .secstrip2 h2 {
    font-size: 28px;
    line-height: 1.2;
    color: #e8d5c0;
    margin: 0;
    letter-spacing: -.5px
}

.aboutus .anchorcenter p {
    font-size: 18px;
    line-height: 1.8;
    color: #c4a882;
    margin: 0
}

.aboutus .loyaltyrow {
    background: #2a0f16;
    border-radius: 13px;
    padding: 24px;
    border: 1px solid #faa70026;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center
}

.aboutus .loyaltyrow .ltag {
    background: #FAA700;
    color: #1a0a0e;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0
}

.aboutus .loyaltyrow p {
    font-size: 16px;
    line-height: 1.8;
    color: #9a7a62;
    margin: 0
}

.aboutus .sideimgcol {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.aboutus .sideimg {
    border-radius: 13px;
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 4px 25px -2px #7612241a
}

.aboutus .sideimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.aboutus .framelines {
    border: 1px solid #faa7001f;
    border-radius: 13px;
    padding: 24px;
    position: relative
}

.aboutus .framelines::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #45a9ef12;
    border-radius: 8px;
    pointer-events: none
}

.aboutus .framelines p {
    font-size: 16px;
    line-height: 1.8;
    color: #9a7a62;
    margin: 0
}

.aboutus .divline3 {
    height: 1px;
    background: linear-gradient(97deg, #761224, transparent);
    margin: 0;
    border: none
}

.aboutus .teamblk {
    padding: 96px 0;
    background: #1e0d14;
    position: relative
}

.aboutus .teamblk .pgwrap {
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    gap: 48px;
    align-items: start
}

.aboutus .teamlabel {
    position: sticky;
    top: 48px
}

.aboutus .teamlabel .secstrip3 {
    display: inline-block;
    background: #761224;
    padding: 8px 24px;
    border-radius: 8px;
    margin-bottom: 24px
}

.aboutus .teamlabel .secstrip3 h2 {
    font-size: 28px;
    line-height: 1.2;
    color: #e8d5c0;
    margin: 0;
    letter-spacing: -.5px
}

.aboutus .teamlabel p {
    font-size: 16px;
    line-height: 1.8;
    color: #9a7a62
}

.aboutus .teamgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.aboutus .tmcard {
    background: #2a0f16;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 4px 25px -2px #7612241a;
    border: 1px solid #faa70012;
    transition: border-color .1s linear
}

.aboutus .tmcard:hover {
    border-color: #faa70033
}

.aboutus .tmcard .tmimg {
    aspect-ratio: 1/1;
    overflow: hidden
}

.aboutus .tmcard .tmimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .15s ease-out
}

.aboutus .tmcard:hover .tmimg img {
    transform: scale(1.03)
}

.aboutus .tmcard .tminfo {
    padding: 24px
}

.aboutus .tmcard .tminfo h5 {
    font-size: 18px;
    line-height: 1.2;
    color: #e8d5c0;
    margin: 0 0 8px;
    letter-spacing: -.3px
}

.aboutus .tmcard .tminfo .trole {
    font-size: 16px;
    line-height: 1.8;
    color: #FAA700;
    display: block;
    margin-bottom: 8px
}

.aboutus .tmcard .tminfo p {
    font-size: 16px;
    line-height: 1.8;
    color: #9a7a62;
    margin: 0
}

@media (max-width: 1024px) {
    .aboutus .titblk .pgwrap {
        grid-template-columns: 1fr 1.3fr;
        gap: 24px
    }

    .aboutus .cardgrid {
        grid-template-columns: 1fr 1fr
    }

    .aboutus .anchorblk .pgwrap {
        grid-template-columns: 1fr
    }

    .aboutus .teamblk .pgwrap {
        grid-template-columns: 1fr
    }

    .aboutus .teamlabel {
        position: static
    }
}

@media (max-width: 768px) {
    .aboutus .titblk .pgwrap {
        grid-template-columns: 1fr
    }

    .aboutus .txtcol {
        padding: 24px 0
    }

    .aboutus .numaccent {
        font-size: 56px
    }

    .aboutus .titstrip h1 {
        font-size: 28px
    }

    .aboutus .cardgrid {
        grid-template-columns: 1fr
    }

    .aboutus .metarow {
        flex-direction: column
    }

    .aboutus .teamgrid {
        grid-template-columns: 1fr
    }

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

@media (max-width: 480px) {
    .aboutus .titblk {
        padding: 48px 0 24px
    }

    .aboutus .pillarsblk,
    .aboutus .anchorblk,
    .aboutus .teamblk {
        padding: 48px 0
    }

    .aboutus .numaccent {
        font-size: 40px
    }

    .aboutus .metacard .mval {
        font-size: 28px
    }
}

.lrnprog {
    background: #18100e;
    color: #e8ddd8;
    overflow-x: hidden
}

.lrnprog .pgwrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px
}

.lrnprog .titblock {
    background: #1e1209;
    padding: 96px 24px;
    position: relative
}

.lrnprog .titblock-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px
}

.lrnprog .titblock-text {
    flex: 1 1 60%
}

.lrnprog .titblock-deco {
    flex: 0 0 38%;
    position: relative
}

.lrnprog .spot1 {
    position: absolute;
    width: 220px;
    height: 220px;
    background: #7612242e;
    border-radius: 48px;
    filter: blur(48px);
    top: -48px;
    right: -24px;
    pointer-events: none
}

.lrnprog .spot2 {
    position: absolute;
    width: 160px;
    height: 160px;
    background: #45a9ef1a;
    border-radius: 36px;
    filter: blur(36px);
    bottom: 0;
    left: 0;
    pointer-events: none
}

.lrnprog .corner-tri {
    position: absolute;
    pointer-events: none
}

.lrnprog .corner-tri.tl {
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 48px 48px 0 0;
    border-color: #76122438 transparent transparent
}

.lrnprog .corner-tri.br {
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 48px 48px;
    border-color: transparent transparent #faa7002e
}

.lrnprog .prefshape {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #FAA700;
    border-radius: 8px;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0
}

.lrnprog .titblock-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 24px
}

.lrnprog .titblock-label span {
    font-size: 16px;
    color: #FAA700;
    letter-spacing: .06em;
    line-height: 1.2
}

.lrnprog .titblock-h1 {
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #f0e6df;
    margin-bottom: 24px
}

.lrnprog .titblock-h1 mark {
    background: #761224;
    color: #f0e6df;
    padding: 0 8px;
    border-radius: 8px
}

.lrnprog .titblock-sub {
    font-size: 18px;
    line-height: 1.8;
    color: #b8a89e;
    max-width: 520px;
    margin-bottom: 48px
}

.lrnprog .titlink {
    display: inline-block;
    background: #761224;
    color: #f0e6df;
    font-size: 16px;
    padding: 24px 48px;
    border-radius: 13px;
    text-decoration: none;
    border: 2px solid #761224;
    transition: border-color .12s ease-out, background .1s ease-out
}

.lrnprog .titlink:hover {
    background: transparent;
    border-color: #FAA700;
    color: #FAA700
}

.lrnprog .titblock-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 22px;
    display: block;
    box-shadow: 0 8px 36px -2px #7612241c
}

.lrnprog .typeanim {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typein 1.4s steps(30, end) .2s both;
    max-width: 100%
}

@keyframes typein {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.lrnprog .divider {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px
}

.lrnprog .divider-line {
    flex: 1;
    height: 1px;
    background: #2e1e18
}

.lrnprog .divider-accent {
    width: 48px;
    height: 3px;
    background: #45A9EF;
    border-radius: 8px;
    margin: 0 8px
}

.lrnprog .modblock {
    padding: 96px 24px;
    background: #15100d
}

.lrnprog .modblock-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start
}

.lrnprog .modblock-aside {
    flex: 0 0 320px;
    position: sticky;
    top: 24px
}

.lrnprog .modblock-main {
    flex: 1 1 0
}

.lrnprog .sidehead {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #f0e6df;
    margin-bottom: 24px
}

.lrnprog .sidehead mark {
    background: #45A9EF;
    color: #0e0a08;
    padding: 0 8px;
    border-radius: 8px
}

.lrnprog .sidetext {
    font-size: 16px;
    line-height: 1.8;
    color: #9e8e84
}

.lrnprog .iconlegend {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.lrnprog .iconlegend-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px
}

.lrnprog .ileg-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.lrnprog .ileg-icon.red {
    background: #76122440
}

.lrnprog .ileg-icon.yel {
    background: #faa7002e
}

.lrnprog .ileg-icon.blu {
    background: #45a9ef2e
}

.lrnprog .ileg-icon svg {
    display: block
}

.lrnprog .ileg-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #9e8e84
}

.lrnprog .ileg-desc strong {
    color: #e8ddd8;
    display: block;
    font-size: 16px
}

.lrnprog .modlist {
    display: flex;
    flex-direction: column;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0
}

.lrnprog .modlist-item {
    background: #1e1510;
    border-radius: 22px;
    padding: 24px;
    box-shadow: inset 0 1px 2px -2px #7612240f inset 0 4px 25px -2px #7612241a;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start
}

.lrnprog .modnum {
    font-size: 40px;
    line-height: 1.2;
    color: #FAA700;
    font-weight: 700;
    flex-shrink: 0;
    width: 48px;
    text-align: right
}

.lrnprog .modtext h4 {
    font-size: 18px;
    line-height: 1.2;
    color: #f0e6df;
    margin-bottom: 8px
}

.lrnprog .modtext p {
    font-size: 16px;
    line-height: 1.8;
    color: #9e8e84;
    margin: 0
}

.lrnprog .divider2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px
}

.lrnprog .divider2-line {
    flex: 1;
    height: 1px;
    background: #2e1e18
}

.lrnprog .divider2-gem {
    width: 12px;
    height: 12px;
    background: #FAA700;
    border-radius: 8px;
    margin: 0 8px
}

.lrnprog .faqblock {
    padding: 96px 24px;
    background: #1a1108;
    position: relative;
    overflow: hidden
}

.lrnprog .faqblock-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.lrnprog .faqbg-poly {
    position: absolute;
    opacity: .06
}

.lrnprog .faqbg-poly svg {
    display: block
}

.lrnprog .faqblock-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    position: relative
}

.lrnprog .faqblock-headcol {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.lrnprog .faqblock-h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #f0e6df
}

.lrnprog .faqblock-h2 mark {
    background: #FAA700;
    color: #0e0a08;
    padding: 0 8px;
    border-radius: 8px
}

.lrnprog .faqblock-note {
    font-size: 16px;
    line-height: 1.8;
    color: #9e8e84
}

.lrnprog .faqlist {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.lrnprog .faqitem {
    background: #231608;
    border-radius: 13px;
    border: 1px solid #2e1e18
}

.lrnprog .faqitem summary {
    padding: 24px;
    font-size: 16px;
    line-height: 1.8;
    color: #e8ddd8;
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px
}

.lrnprog .faqitem summary::-webkit-details-marker {
    display: none
}

.lrnprog .faqarrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #76122433;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s ease-out, transform .12s ease-out
}

.lrnprog .faqitem[open] .faqarrow {
    background: #761224;
    transform: rotate(90deg)
}

.lrnprog .faqitem details {
    width: 100%
}

.lrnprog .faqbody {
    padding: 0 24px 24px;
    font-size: 16px;
    line-height: 1.8;
    color: #9e8e84
}

.lrnprog .divider3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px
}

.lrnprog .divider3-seg1 {
    flex: 3;
    height: 1px;
    background: #2e1e18
}

.lrnprog .divider3-dot {
    width: 6px;
    height: 6px;
    border-radius: 8px;
    background: #45A9EF;
    margin: 0 8px
}

.lrnprog .divider3-seg2 {
    flex: 1;
    height: 1px;
    background: #45A9EF;
    opacity: .3
}

.lrnprog .loyalblock {
    padding: 96px 24px;
    background: #13100f;
    position: relative
}

.lrnprog .loyalblock-corner1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 64px 64px 0;
    border-color: transparent #faa7001f transparent transparent;
    pointer-events: none
}

.lrnprog .loyalblock-corner2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 64px 0 0 64px;
    border-color: transparent transparent transparent #45a9ef1a;
    pointer-events: none
}

.lrnprog .loyalblock-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px
}

.lrnprog .loyal-headrow {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px
}

.lrnprog .loyal-h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #f0e6df
}

.lrnprog .loyal-h2 mark {
    background: #761224;
    color: #f0e6df;
    padding: 0 8px;
    border-radius: 8px
}

.lrnprog .loyal-sub {
    font-size: 16px;
    line-height: 1.8;
    color: #9e8e84;
    max-width: 380px;
    text-align: right
}

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

.lrnprog .loyal-card {
    background: #1e1510;
    border-radius: 22px;
    padding: 48px 24px 24px;
    box-shadow: 0 4px 25px -2px #faa7001a;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    overflow: hidden
}

.lrnprog .loyal-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 22px 22px 0 0
}

.lrnprog .loyal-card-accent.red {
    background: #761224
}

.lrnprog .loyal-card-accent.yel {
    background: #FAA700
}

.lrnprog .loyal-card-accent.blu {
    background: #45A9EF
}

.lrnprog .loyal-card h4 {
    font-size: 18px;
    line-height: 1.2;
    color: #f0e6df
}

.lrnprog .loyal-card p {
    font-size: 16px;
    line-height: 1.8;
    color: #9e8e84;
    margin: 0
}

.lrnprog .loyal-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #faa7001f;
    border-radius: 8px;
    padding: 8px;
    font-size: 16px;
    color: #FAA700;
    align-self: flex-start
}

.lrnprog .badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #FAA700
}

@media (max-width: 1024px) {
    .lrnprog .titblock-h1 {
        font-size: 40px
    }

    .lrnprog .modblock-inner {
        flex-direction: column
    }

    .lrnprog .modblock-aside {
        position: static;
        flex: none;
        width: 100%
    }

    .lrnprog .faqblock-inner {
        grid-template-columns: 1fr
    }

    .lrnprog .loyal-cards {
        grid-template-columns: 1fr 1fr
    }

    .lrnprog .loyal-headrow {
        flex-direction: column;
        align-items: flex-start
    }

    .lrnprog .loyal-sub {
        text-align: left;
        max-width: 100%
    }
}

@media (max-width: 768px) {
    .lrnprog .titblock-inner {
        flex-direction: column
    }

    .lrnprog .titblock-deco {
        width: 100%;
        flex: none
    }

    .lrnprog .titblock-h1 {
        font-size: 40px
    }

    .lrnprog .sidehead {
        font-size: 28px
    }

    .lrnprog .loyal-cards {
        grid-template-columns: 1fr
    }

    .lrnprog .titblock {
        padding: 48px 24px
    }

    .lrnprog .modblock {
        padding: 48px 24px
    }

    .lrnprog .faqblock {
        padding: 48px 24px
    }

    .lrnprog .loyalblock {
        padding: 48px 24px
    }
}

@media (max-width: 480px) {
    .lrnprog .titblock-h1 {
        font-size: 28px
    }

    .lrnprog .faqblock-h2 {
        font-size: 28px
    }

    .lrnprog .loyal-h2 {
        font-size: 28px
    }

    .lrnprog .titlink {
        padding: 24px
    }

    .lrnprog .modlist-item {
        flex-direction: column;
        gap: 8px
    }

    .lrnprog .modnum {
        width: auto;
        text-align: left
    }
}

.lrnprog .dualgradanim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.lrnprog .dualgradlayer1 {
    position: absolute;
    width: 60%;
    height: 60%;
    top: -10%;
    left: 20%;
    background: linear-gradient(97deg, #76122412, #45a9ef0d);
    border-radius: 48px;
    filter: blur(60px);
    animation: gshift1 9s linear infinite alternate
}

.lrnprog .dualgradlayer2 {
    position: absolute;
    width: 40%;
    height: 50%;
    bottom: 0;
    right: 10%;
    background: linear-gradient(97deg, #faa7000d, #7612240f);
    border-radius: 36px;
    filter: blur(48px);
    animation: gshift2 13s linear infinite alternate
}

@keyframes gshift1 {
    from {
        transform: translateX(-8%) translateY(0)
    }

    to {
        transform: translateX(8%) translateY(-6%)
    }
}

@keyframes gshift2 {
    from {
        transform: translateX(0) translateY(4%)
    }

    to {
        transform: translateX(-12%) translateY(-4%)
    }
}

.ctus {
    background-color: #18100e;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative
}

.ctus .pgwrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px
}

.ctus .bordtrace {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden
}

.ctus .bordtrace::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    border: 1px solid #7612242e;
    border-radius: 13px;
    animation: tracedraw 1.1s ease-out forwards
}

@keyframes tracedraw {
    0% {
        clip-path: inset(0 100% 100% 0)
    }

    40% {
        clip-path: inset(0 0 100% 0)
    }

    70% {
        clip-path: inset(0 0 0 0)
    }

    100% {
        clip-path: inset(0 0 0 0)
    }
}

.ctus .topband {
    padding: 96px 0 48px;
    position: relative
}

.ctus .topband .pgwrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start
}

.ctus .headstrip {
    display: inline-block;
    background: linear-gradient(97deg, #761224, #45A9EF);
    padding: 8px 24px;
    border-radius: 8px;
    margin-bottom: 24px
}

.ctus .headstrip h1 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: #f5ede8;
    margin: 0
}

.ctus .headstrip h1 em {
    font-style: normal;
    color: #FAA700
}

.ctus .tagline {
    font-size: 18px;
    line-height: 1.8;
    color: #c8b4ad;
    margin: 0 0 24px;
    max-width: 420px
}

.ctus .infostack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px
}

.ctus .infoitem {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    background: #211510;
    border-radius: 13px;
    box-shadow: 0 4px 25px -2px #7612241a;
    position: relative;
    transition: border-color .12s ease-out;
    border: 1px solid #7612241f
}

.ctus .infoitem::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #761224, transparent);
    border-radius: 0 13px 13px 0
}

.ctus .infoitem:hover {
    border-color: #76122459
}

.ctus .icobox {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #7612242e;
    display: flex;
    align-items: center;
    justify-content: center
}

.ctus .icobox svg {
    width: 20px;
    height: 20px
}

.ctus .infolabel {
    font-size: 16px;
    color: #FAA700;
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase
}

.ctus .infotext {
    font-size: 16px;
    line-height: 1.8;
    color: #d4bfb8;
    margin: 0
}

.ctus .infotext a {
    color: #45A9EF;
    text-decoration: none;
    transition: color .1s ease-out
}

.ctus .infotext a:hover {
    color: #FAA700
}

.ctus .rightcol {
    position: relative
}

.ctus .rightcol::before {
    content: '';
    position: absolute;
    top: -24px;
    left: -24px;
    right: -24px;
    bottom: -24px;
    border: 1px solid #45a9ef14;
    border-radius: 22px;
    pointer-events: none
}

.ctus .miltrack {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 48px;
    padding: 24px;
    background: #1e1208;
    border-radius: 13px;
    border: 1px solid #faa7001f;
    box-shadow: 0 1px 2px -2px #faa7000f;
    overflow: hidden
}

.ctus .milstep {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative
}

.ctus .milstep:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 60%;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, #FAA700, #7612244d)
}

.ctus .milicon {
    width: 40px;
    height: 40px;
    border-radius: 48px;
    background: #76122440;
    border: 2px solid #761224;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1
}

.ctus .milicon svg {
    width: 18px;
    height: 18px
}

.ctus .milabel {
    font-size: 16px;
    color: #c8b4ad;
    text-align: center;
    line-height: 1.2
}

.ctus .mildate {
    font-size: 16px;
    color: #FAA700;
    font-weight: 700
}

.ctus .divline {
    height: 2px;
    background: linear-gradient(90deg, #761224, #18100e00);
    margin: 0;
    border: none
}

.ctus .formblock {
    padding: 48px 0 96px;
    position: relative
}

.ctus .formblock .pgwrap {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 48px;
    align-items: start
}

.ctus .formside {
    position: relative
}

.ctus .formhead {
    display: inline-block;
    background: #761224;
    padding: 8px 24px;
    border-radius: 8px;
    margin-bottom: 24px
}

.ctus .formhead h2 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #f5ede8;
    margin: 0
}

.ctus .formdesc {
    font-size: 16px;
    line-height: 1.8;
    color: #c8b4ad;
    margin: 0 0 24px
}

.ctus .loyalbadge {
    padding: 24px;
    background: linear-gradient(97deg, #76122438, #45a9ef1a);
    border-radius: 13px;
    border: 1px solid #faa70033;
    box-shadow: 0 8px 36px -2px #7612241c
}

.ctus .loyaltitle {
    font-size: 18px;
    color: #FAA700;
    margin: 0 0 8px;
    font-weight: 700
}

.ctus .loyaltext {
    font-size: 16px;
    line-height: 1.8;
    color: #c8b4ad;
    margin: 0
}

.ctus .formcard {
    background: #1e1208;
    border-radius: 22px;
    padding: 48px;
    border: 1px solid #7612242e;
    box-shadow: 0 8px 36px -2px #7612241c inset 0 2px 12px #00000040;
    position: relative
}

.ctus .formcard::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #45A9EF, transparent 70%);
    border-radius: 0 22px 22px 0
}

.ctus .cform {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.ctus .frow {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ctus .frow label {
    font-size: 16px;
    color: #FAA700;
    font-weight: 600;
    letter-spacing: .03em
}

.ctus .frow input[type="email"],
.ctus .frow select {
    background: #150d09;
    border: 1px solid #76122459;
    border-radius: 8px;
    color: #f0e4de;
    font-size: 16px;
    padding: 16px 24px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .12s ease-out, box-shadow .09s linear;
    outline: none;
    appearance: none;
    -webkit-appearance: none
}

.ctus .frow input[type="email"]::placeholder {
    color: #6b5a54
}

.ctus .frow input[type="email"]:focus,
.ctus .frow select:focus {
    border-color: #45A9EF;
    box-shadow: 0 0 0 3px #45a9ef1f
}

.ctus .selwrap {
    position: relative
}

.ctus .selwrap select {
    padding-right: 48px;
    cursor: pointer
}

.ctus .selarrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
}

.ctus .selarrow svg {
    width: 16px;
    height: 16px
}

.ctus .radiogrp {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ctus .raditem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: #150d09;
    border-radius: 8px;
    border: 1px solid #76122440;
    cursor: pointer;
    transition: border-color .1s ease-out, background .1s ease-out
}

.ctus .raditem:hover {
    border-color: #45a9ef66;
    background: #1c1109
}

.ctus .raditem input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #761224;
    cursor: pointer;
    flex-shrink: 0
}

.ctus .raditem span {
    font-size: 16px;
    color: #d4bfb8;
    line-height: 1.2
}

.ctus .checkrow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
    background: #76122414;
    border-radius: 8px;
    border: 1px solid #76122433
}

.ctus .checkrow input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #761224;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px
}

.ctus .checkrow span {
    font-size: 16px;
    line-height: 1.8;
    color: #c8b4ad
}

.ctus .checkrow a {
    color: #45A9EF;
    text-decoration: none;
    transition: color .1s ease-out
}

.ctus .checkrow a:hover {
    color: #FAA700
}

.ctus .subbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #761224;
    color: #f5ede8;
    font-size: 18px;
    font-weight: 700;
    padding: 16px 48px;
    border-radius: 13px;
    border: 2px solid #761224;
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .12s ease-out, border-color .12s ease-out, box-shadow .09s linear;
    box-shadow: 0 4px 25px -2px #7612241a;
    position: relative;
    overflow: visible;
    align-self: flex-start
}

.ctus .subbtn::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid transparent;
    border-radius: 16px;
    transition: border-color .12s ease-out
}

.ctus .subbtn:hover {
    background: #8f1a2e;
    border-color: #8f1a2e;
    box-shadow: 0 8px 36px -2px #7612241c
}

.ctus .subbtn:hover::before {
    border-color: #76122473
}

.ctus .subbtn:focus {
    outline: 3px solid #45A9EF;
    outline-offset: 3px
}

.ctus .subbtn:active {
    background: #5a0e1b
}

.ctus .subbtn svg {
    width: 20px;
    height: 20px
}

@media (max-width: 1024px) {
    .ctus .topband .pgwrap {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .ctus .formblock .pgwrap {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .ctus .formcard {
        padding: 24px
    }

    .ctus .rightcol::before {
        display: none
    }
}

@media (max-width: 768px) {
    .ctus .topband {
        padding: 48px 0 24px
    }

    .ctus .headstrip h1 {
        font-size: 28px
    }

    .ctus .miltrack {
        flex-direction: column;
        gap: 24px
    }

    .ctus .milstep:not(:last-child)::after {
        display: none
    }

    .ctus .formcard {
        padding: 24px
    }

    .ctus .subbtn {
        width: 100%
    }
}

@media (max-width: 480px) {
    .ctus .headstrip h1 {
        font-size: 28px
    }

    .ctus .formblock {
        padding: 24px 0 48px
    }

    .ctus .infoitem {
        flex-direction: column;
        gap: 8px
    }
}

.dbt {
    background: #1a0a0e;
    color: #e8ddd0;
    overflow-x: hidden;
    position: relative
}

.dbt .pgwrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px
}

.dbt .scallop {
    width: 100%;
    height: 32px;
    background: #1a0a0e;
    position: relative;
    overflow: hidden
}

.dbt .scallop svg {
    width: 100%;
    height: 100%
}

.dbt .scallop.inv svg {
    transform: scaleY(-1)
}

.dbt .titlesec {
    padding: 96px 24px 48px;
    text-align: center;
    position: relative
}

.dbt .titlesec .bgnumber {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 72px;
    font-weight: 900;
    color: #76122414;
    letter-spacing: -4px;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0
}

.dbt .titlesec .tinner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto
}

.dbt .titlesec .prefix {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #FAA700;
    transform: rotate(45deg);
    margin-right: 8px;
    vertical-align: middle
}

.dbt .titlesec h1 {
    font-size: 72px;
    line-height: 1.2;
    letter-spacing: -2px;
    color: #e8ddd0;
    margin: 0 0 8px
}

.dbt .titlesec h1 span {
    color: #761224
}

.dbt .titlesec .sub {
    font-size: 18px;
    line-height: 1.8;
    color: #b8a898;
    max-width: 540px;
    margin: 0 auto 48px
}

.dbt .titlesec .imgbox {
    position: relative;
    display: inline-block;
    max-width: 520px;
    width: 100%
}

.dbt .titlesec .imgbox img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 22px;
    display: block;
    box-shadow: 0 8px 36px -2px #7612241c
}

.dbt .titlesec .imgbox .overlay {
    position: absolute;
    inset: 0;
    background: #76122459;
    border-radius: 22px;
    pointer-events: none
}

.dbt .cursec {
    background: #160810;
    padding: 96px 24px;
    position: relative
}

.dbt .cursec .edgestrip {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: #761224;
    border-radius: 0 0 0 0
}

.dbt .cursec .cgrid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center
}

.dbt .cursec .ctxt .hstrip {
    display: inline-block;
    background: #761224;
    padding: 4px 16px;
    border-radius: 8px;
    margin-bottom: 24px
}

.dbt .cursec .ctxt .hstrip h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #e8ddd0;
    margin: 0
}

.dbt .cursec .ctxt p {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a898;
    margin: 0 0 24px
}

.dbt .cursec .metarow {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 24px
}

.dbt .cursec .metaitem {
    flex: 1;
    background: #1f0d14;
    border-radius: 13px;
    padding: 24px;
    box-shadow: inset 0 1px 2px -2px #7612240f inset 0 4px 25px -2px #7612241a
}

.dbt .cursec .metaitem strong {
    display: block;
    font-size: 28px;
    color: #FAA700;
    line-height: 1.2;
    margin-bottom: 8px
}

.dbt .cursec .metaitem span {
    font-size: 16px;
    color: #b8a898;
    line-height: 1.8
}

.dbt .cursec .cimgwrap {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 4px 25px -2px #7612241a
}

.dbt .cursec .cimgwrap img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block
}

.dbt .peopsec {
    background: #12060c;
    padding: 96px 24px;
    position: relative
}

.dbt .peopsec .edgestrip {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #45A9EF
}

.dbt .peopsec .pinner {
    max-width: 1400px;
    margin: 0 auto
}

.dbt .peopsec .phdr {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 48px
}

.dbt .peopsec .phdr .hstrip {
    display: inline-block;
    background: #45A9EF;
    padding: 4px 16px;
    border-radius: 8px
}

.dbt .peopsec .phdr .hstrip h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #0d0508;
    margin: 0
}

.dbt .peopsec .phdr p {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a898;
    max-width: 480px;
    margin: 0;
    padding-top: 8px
}

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

.dbt .peopsec .pcard {
    background: #1f0d14;
    border-radius: 22px;
    padding: 24px;
    box-shadow: inset 0 4px 25px -2px #7612241a
}

.dbt .peopsec .pcard .cavatar {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 13px;
    display: block;
    margin-bottom: 24px
}

.dbt .peopsec .pcard blockquote {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.8;
    color: #d4c4b4;
    font-style: italic
}

.dbt .peopsec .pcard .cname {
    font-size: 16px;
    color: #FAA700;
    font-weight: 700
}

.dbt .peopsec .pcard .crole {
    font-size: 16px;
    color: #b8a898
}

.dbt .repsec {
    background: #1a0a0e;
    padding: 96px 24px;
    position: relative
}

.dbt .repsec .circuitbg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 0
}

.dbt .repsec .circuitbg svg {
    width: 100%;
    height: 100%;
    opacity: .04
}

.dbt .repsec .rinner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.dbt .repsec .rhdr {
    text-align: right;
    margin-bottom: 48px
}

.dbt .repsec .rhdr .hstrip {
    display: inline-block;
    background: #FAA700;
    padding: 4px 16px;
    border-radius: 8px
}

.dbt .repsec .rhdr .hstrip h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #0d0508;
    margin: 0
}

.dbt .repsec .rgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px
}

.dbt .repsec .ritem {
    background: #1f0d14;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 4px 25px -2px #faa7001a;
    transition: box-shadow .12s ease-out
}

.dbt .repsec .ritem:hover {
    box-shadow: 0 8px 36px -2px #faa70038
}

.dbt .repsec .ritem .rnum {
    font-size: 56px;
    font-weight: 900;
    color: #761224;
    line-height: 1.2;
    letter-spacing: -2px
}

.dbt .repsec .ritem h4 {
    font-size: 18px;
    color: #e8ddd0;
    margin: 8px 0;
    line-height: 1.2
}

.dbt .repsec .ritem p {
    font-size: 16px;
    color: #b8a898;
    line-height: 1.8;
    margin: 0
}

.dbt .gapsec {
    background: #0f0509;
    padding: 96px 24px;
    position: relative
}

.dbt .gapsec .edgestrip {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: #FAA700
}

.dbt .gapsec .ginner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 96px;
    align-items: start
}

.dbt .gapsec .gtxt .hstrip {
    display: inline-block;
    background: #FAA700;
    padding: 4px 16px;
    border-radius: 8px;
    margin-bottom: 24px
}

.dbt .gapsec .gtxt .hstrip h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #0d0508;
    margin: 0
}

.dbt .gapsec .gtxt p {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a898;
    margin: 0 0 24px
}

.dbt .gapsec .gsteps {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.dbt .gapsec .gstep {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px
}

.dbt .gapsec .gstep .gnum {
    font-size: 40px;
    font-weight: 900;
    color: #761224;
    line-height: 1.2;
    min-width: 48px
}

.dbt .gapsec .gstep p {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a898;
    margin: 0;
    padding-top: 8px
}

.dbt .gapsec .gside {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.dbt .gapsec .gside .gimg {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 22px;
    display: block;
    box-shadow: 0 4px 25px -2px #7612241a
}

.dbt .gapsec .usagebar {
    background: #1f0d14;
    border-radius: 13px;
    padding: 24px;
    box-shadow: inset 0 4px 25px -2px #7612241a
}

.dbt .gapsec .usagebar h5 {
    font-size: 16px;
    color: #FAA700;
    margin: 0 0 8px;
    line-height: 1.2
}

.dbt .gapsec .bartrack {
    background: #2a1018;
    border-radius: 8px;
    height: 12px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 8px
}

.dbt .gapsec .barfill {
    height: 100%;
    width: 72%;
    background: linear-gradient(97deg, #761224, #45A9EF);
    border-radius: 8px;
    transition: width .13s ease-out
}

.dbt .gapsec .barlabel {
    font-size: 16px;
    color: #b8a898;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.dbt .ltvsec {
    background: #160810;
    padding: 96px 24px;
    position: relative
}

.dbt .ltvsec .edgestrip {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #761224
}

.dbt .ltvsec .linner {
    max-width: 1400px;
    margin: 0 auto
}

.dbt .ltvsec .lhdr {
    margin-bottom: 48px
}

.dbt .ltvsec .lhdr .hstrip {
    display: inline-block;
    background: #761224;
    padding: 4px 16px;
    border-radius: 8px
}

.dbt .ltvsec .lhdr .hstrip h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #e8ddd0;
    margin: 0
}

.dbt .ltvsec .lgrid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 96px;
    align-items: start
}

.dbt .ltvsec .limg {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 22px;
    display: block;
    box-shadow: 0 8px 36px -2px #7612241c
}

.dbt .ltvsec .ltxt p {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a898;
    margin: 0 0 24px
}

.dbt .ltvsec .lpoints {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px
}

.dbt .ltvsec .lpoint {
    background: #1f0d14;
    border-radius: 13px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    box-shadow: inset 0 1px 2px -2px #7612240f inset 0 4px 25px -2px #7612241a;
    transition: box-shadow .1s ease-out
}

.dbt .ltvsec .lpoint:hover {
    box-shadow: 0 8px 36px -2px #7612241c
}

.dbt .ltvsec .lpoint .lpnum {
    font-size: 28px;
    font-weight: 900;
    color: #FAA700;
    line-height: 1.2;
    min-width: 32px
}

.dbt .ltvsec .lpoint .lptxt {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a898
}

.dbt .mirsec {
    background: #12060c;
    padding: 96px 24px;
    position: relative
}

.dbt .mirsec .radpulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0
}

.dbt .mirsec .radpulse span {
    position: absolute;
    border-radius: 48px;
    border: 1px solid #45a9ef26;
    animation: radexpand 3.6s ease-out infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.dbt .mirsec .radpulse span:nth-child(1) {
    width: 200px;
    height: 200px;
    animation-delay: 0s
}

.dbt .mirsec .radpulse span:nth-child(2) {
    width: 400px;
    height: 400px;
    animation-delay: 1.2s
}

.dbt .mirsec .radpulse span:nth-child(3) {
    width: 600px;
    height: 600px;
    animation-delay: 2.4s
}

@keyframes radexpand {
    0% {
        opacity: .5;
        transform: translate(-50%, -50%) scale(0.8)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.3)
    }
}

.dbt .mirsec .minner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center
}

.dbt .mirsec .mimg {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 22px;
    display: block;
    box-shadow: 0 8px 36px -2px #45a9ef1c
}

.dbt .mirsec .mtxt .hstrip {
    display: inline-block;
    background: #45A9EF;
    padding: 4px 16px;
    border-radius: 8px;
    margin-bottom: 24px
}

.dbt .mirsec .mtxt .hstrip h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #0d0508;
    margin: 0
}

.dbt .mirsec .mtxt p {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a898;
    margin: 0 0 24px
}

.dbt .mirsec .mquote {
    background: #1f0d14;
    border-radius: 22px;
    padding: 24px;
    box-shadow: inset 0 4px 25px -2px #45a9ef1a
}

.dbt .mirsec .mquote blockquote {
    font-size: 18px;
    line-height: 1.8;
    color: #d4c4b4;
    font-style: italic;
    margin: 0 0 8px
}

.dbt .mirsec .mquote .mqname {
    font-size: 16px;
    color: #45A9EF;
    font-weight: 700
}

.dbt .mirsec .loyalbadge {
    margin-top: 24px;
    background: linear-gradient(97deg, #761224, #45A9EF);
    border-radius: 13px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px
}

.dbt .mirsec .loyalbadge .badgeico {
    width: 48px;
    height: 48px;
    flex-shrink: 0
}

.dbt .mirsec .loyalbadge .badgetxt {
    font-size: 16px;
    color: #e8ddd0;
    line-height: 1.8
}

.dbt .mirsec .loyalbadge .badgetxt strong {
    display: block;
    font-size: 18px;
    color: #FAA700
}

@media (max-width: 1024px) {
    .dbt .cursec .cgrid {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .dbt .peopsec .pcards {
        grid-template-columns: 1fr 1fr
    }

    .dbt .repsec .rgrid {
        grid-template-columns: 1fr 1fr
    }

    .dbt .gapsec .ginner {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .dbt .ltvsec .lgrid {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .dbt .mirsec .minner {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .dbt .peopsec .phdr {
        flex-direction: column;
        gap: 24px
    }
}

@media (max-width: 768px) {
    .dbt .titlesec h1 {
        font-size: 40px
    }

    .dbt .cursec .metarow {
        flex-direction: column
    }

    .dbt .peopsec .pcards {
        grid-template-columns: 1fr
    }

    .dbt .repsec .rgrid {
        grid-template-columns: 1fr
    }

    .dbt .titlesec {
        padding: 48px 24px
    }

    .dbt .cursec {
        padding: 48px 24px
    }

    .dbt .peopsec {
        padding: 48px 24px
    }

    .dbt .repsec {
        padding: 48px 24px
    }

    .dbt .gapsec {
        padding: 48px 24px
    }

    .dbt .ltvsec {
        padding: 48px 24px
    }

    .dbt .mirsec {
        padding: 48px 24px
    }
}

@media (max-width: 480px) {
    .dbt .titlesec h1 {
        font-size: 28px
    }

    .dbt .cursec .ctxt .hstrip h2 {
        font-size: 28px
    }

    .dbt .peopsec .phdr .hstrip h2 {
        font-size: 28px
    }

    .dbt .repsec .rhdr .hstrip h2 {
        font-size: 28px
    }

    .dbt .gapsec .gtxt .hstrip h2 {
        font-size: 28px
    }

    .dbt .ltvsec .lhdr .hstrip h2 {
        font-size: 28px
    }

    .dbt .mirsec .mtxt .hstrip h2 {
        font-size: 28px
    }

    .dbt .repsec .ritem .rnum {
        font-size: 40px
    }
}

.howwrk {
    background: #18100d;
    color: #e8ddd5;
    overflow-x: clip;
    position: relative
}

.howwrk .pgwrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px
}

.howwrk .dotrow {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center
}

.howwrk .dotrow span {
    width: 6px;
    height: 6px;
    border-radius: 8px;
    background: #FAA700;
    display: block;
    opacity: .7
}

.howwrk .dotrow span:nth-child(2) {
    background: #761224;
    opacity: .9
}

.howwrk .dotrow span:nth-child(3) {
    background: #45A9EF;
    opacity: .6
}

.howwrk .dotrow span:nth-child(4) {
    background: #FAA700;
    opacity: .4
}

.howwrk .dotrow span:nth-child(5) {
    background: #761224;
    opacity: .3
}

.howwrk .diamond {
    width: 8px;
    height: 8px;
    background: #FAA700;
    transform: rotate(45deg);
    display: inline-block;
    flex-shrink: 0
}

.howwrk .divline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 48px 0
}

.howwrk .divline::before,
.howwrk .divline::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(97deg, #761224 0%, #45A9EF 100%);
    opacity: .35
}

.howwrk .divline2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 48px 0
}

.howwrk .divline2::before {
    content: '';
    width: 48px;
    height: 1px;
    background: #45A9EF;
    opacity: .4
}

.howwrk .divline2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #2a1a12
}

.howwrk .titblk {
    padding: 96px 0 48px;
    position: relative
}

.howwrk .titblk .frameborder {
    position: absolute;
    inset: 24px;
    pointer-events: none;
    border: 1px solid #faa7001f;
    border-radius: 13px
}

.howwrk .titblk .frameborder::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 48px;
    width: 48px;
    height: 1px;
    background: #FAA700;
    opacity: .6
}

.howwrk .titblk .frameborder::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 48px;
    width: 48px;
    height: 1px;
    background: #45A9EF;
    opacity: .5
}

.howwrk .titinner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: center;
    padding: 48px
}

.howwrk .titimg {
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 8px 36px -2px #7612241c
}

.howwrk .titimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.howwrk .titimg .vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 70%, transparent 30%, #120804bf 100%);
    pointer-events: none
}

.howwrk .titimg .caption {
    position: absolute;
    inset: 0;
    background: #761224d1;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    opacity: 0;
    transition: opacity .12s ease-out;
    border-radius: 13px
}

.howwrk .titimg:hover .caption {
    opacity: 1
}

.howwrk .titimg .caption p {
    font-size: 16px;
    line-height: 1.8;
    color: #e8ddd5;
    margin: 0
}

.howwrk .tittxt {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.howwrk .tittxt .counter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px
}

.howwrk .tittxt .numval {
    font-size: 72px;
    line-height: 1.2;
    font-weight: 900;
    color: #FAA700;
    letter-spacing: -.04em
}

.howwrk .tittxt .numlabel {
    font-size: 16px;
    line-height: 1.8;
    color: #a89080;
    max-width: 120px
}

.howwrk .tittxt .h1strip {
    display: inline-block;
    background: linear-gradient(97deg, #761224 0%, #45A9EF 100%);
    padding: 8px 24px;
    border-radius: 8px
}

.howwrk .tittxt h1 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.025em;
    color: #f5ede6;
    margin: 0
}

.howwrk .tittxt .subdesc {
    font-size: 18px;
    line-height: 1.8;
    color: #b8a090;
    max-width: 480px
}

.howwrk .stepsblk {
    padding: 48px 0 96px;
    position: relative
}

.howwrk .stepsblk .bgaccent {
    position: absolute;
    inset: 0;
    background: #120c08;
    pointer-events: none
}

.howwrk .stepsblk .glowcenter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center, #45a9ef0a 0%, transparent 70%);
    pointer-events: none;
    animation: softglow 6s ease-in-out infinite alternate
}

@keyframes softglow {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

.howwrk .stepsblk .stepswrap {
    position: relative;
    z-index: 1
}

.howwrk .stepsblk .sechead {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px
}

.howwrk .stepsblk .h2strip {
    display: inline-block;
    background: #76122440;
    border: 1px solid #76122466;
    padding: 8px 24px;
    border-radius: 8px
}

.howwrk .stepsblk h2 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #f0e4da;
    margin: 0
}

.howwrk .stepsgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px
}

.howwrk .stepcard {
    background: #1e1208;
    border-radius: 13px;
    padding: 24px;
    border: 1px solid #faa7001a;
    box-shadow: inset 0 1px 2px -2px #7612240f 0 4px 25px -2px #7612241a;
    position: relative;
    opacity: 0;
    animation: fadeup .13s ease-out forwards;
    transition: border-color .1s ease-out, box-shadow .1s ease-out
}

.howwrk .stepcard:hover {
    border-color: #faa7004d;
    box-shadow: inset 0 1px 2px -2px #7612240f 0 8px 36px -2px #7612241c
}

.howwrk .stepcard.s1 {
    animation-delay: .05s;
    --acc: #761224
}

.howwrk .stepcard.s2 {
    animation-delay: .1s;
    --acc: #FAA700
}

.howwrk .stepcard.s3 {
    animation-delay: .15s;
    --acc: #45A9EF
}

.howwrk .stepcard.s4 {
    animation-delay: .2s;
    --acc: #761224
}

.howwrk .stepcard.s5 {
    animation-delay: .25s;
    --acc: #FAA700
}

.howwrk .stepcard.s6 {
    animation-delay: .3s;
    --acc: #45A9EF
}

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

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

.howwrk .stepcard .stepnum {
    font-size: 56px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: 8px;
    display: block
}

.howwrk .stepcard.s1 .stepnum {
    color: #761224
}

.howwrk .stepcard.s2 .stepnum {
    color: #FAA700
}

.howwrk .stepcard.s3 .stepnum {
    color: #45A9EF
}

.howwrk .stepcard.s4 .stepnum {
    color: #761224
}

.howwrk .stepcard.s5 .stepnum {
    color: #FAA700
}

.howwrk .stepcard.s6 .stepnum {
    color: #45A9EF
}

.howwrk .stepcard h4 {
    font-size: 18px;
    line-height: 1.2;
    color: #f0e4da;
    margin: 0 0 8px;
    letter-spacing: -.01em
}

.howwrk .stepcard p {
    font-size: 16px;
    line-height: 1.8;
    color: #907060;
    margin: 0
}

.howwrk .stepcard .diagline {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: 13px
}

.howwrk .stepcard .diagline::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 1px;
    height: 140%;
    background: linear-gradient(180deg, transparent, #faa70014, transparent);
    transform: rotate(-35deg);
    transform-origin: top right
}

.howwrk .chartblk {
    padding: 96px 0;
    position: relative
}

.howwrk .chartblk .bgstrip {
    position: absolute;
    inset: 0;
    background: linear-gradient(97deg, #7612241f 0%, #45a9ef0f 100%);
    pointer-events: none
}

.howwrk .chartblk .bgstrip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(./visuals/_MG_0557.jpg);
    background-size: cover;
    background-position: center;
    opacity: .07
}

.howwrk .chartblk .chartwrap {
    position: relative;
    z-index: 1
}

.howwrk .chartblk .splitgrid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start
}

.howwrk .chartblk h3 {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #f0e4da;
    margin: 0 0 24px
}

.howwrk .chartblk .h3strip {
    display: inline-block;
    background: #45a9ef26;
    border: 1px solid #45a9ef4d;
    padding: 8px 24px;
    border-radius: 8px;
    margin-bottom: 24px
}

.howwrk .chartblk .chartdesc {
    font-size: 16px;
    line-height: 1.8;
    color: #907060;
    margin: 0 0 48px;
    max-width: 480px
}

.howwrk .stepchart {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.howwrk .stepchart .bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px
}

.howwrk .stepchart .barlabel {
    font-size: 16px;
    line-height: 1.2;
    color: #a08070;
    width: 120px;
    flex-shrink: 0
}

.howwrk .stepchart .bartrack {
    flex: 1;
    height: 28px;
    background: #2a1a12;
    border-radius: 8px;
    overflow: hidden;
    position: relative
}

.howwrk .stepchart .barfill {
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 16px;
    color: #f0e4da;
    font-weight: 700;
    animation: barexpand .15s ease-out forwards;
    animation-delay: var(--bd, 0s);
    width: 0
}

@keyframes barexpand {
    to {
        width: var(--bw, 60%)
    }
}

.howwrk .stepchart .bar:nth-child(1) .barfill {
    background: linear-gradient(97deg, #761224, #a01830);
    --bw: 30%;
    --bd: .08s
}

.howwrk .stepchart .bar:nth-child(2) .barfill {
    background: linear-gradient(97deg, #761224, #c02040);
    --bw: 48%;
    --bd: .1s
}

.howwrk .stepchart .bar:nth-child(3) .barfill {
    background: linear-gradient(97deg, #a01830, #FAA700);
    --bw: 62%;
    --bd: .12s
}

.howwrk .stepchart .bar:nth-child(4) .barfill {
    background: linear-gradient(97deg, #FAA700, #d08800);
    --bw: 75%;
    --bd: .14s
}

.howwrk .stepchart .bar:nth-child(5) .barfill {
    background: linear-gradient(97deg, #d08800, #45A9EF);
    --bw: 88%;
    --bd: .15s
}

.howwrk .loyaltycard {
    background: #1e1208;
    border-radius: 22px;
    padding: 24px;
    border: 1px solid #faa70026;
    box-shadow: inset 0 4px 25px -2px #7612241a 0 8px 36px -2px #7612241c;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: right
}

.howwrk .loyaltycard .lctag {
    font-size: 16px;
    line-height: 1.8;
    color: #FAA700;
    letter-spacing: .06em;
    text-transform: uppercase
}

.howwrk .loyaltycard h5 {
    font-size: 28px;
    line-height: 1.2;
    color: #f0e4da;
    margin: 0;
    letter-spacing: -.015em
}

.howwrk .loyaltycard .lcdesc {
    font-size: 16px;
    line-height: 1.8;
    color: #907060;
    margin: 0
}

.howwrk .loyaltycard .lclist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.howwrk .loyaltycard .lclist li {
    font-size: 16px;
    line-height: 1.8;
    color: #b8a090;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px
}

.howwrk .loyaltycard .lclist li::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 8px;
    background: #FAA700;
    flex-shrink: 0
}

.howwrk .loyaltycard .joinbtn {
    background: linear-gradient(97deg, #761224 0%, #45A9EF 100%);
    color: #f5ede6;
    border: none;
    border-radius: 13px;
    padding: 24px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    transition: box-shadow .1s ease-out, transform .08s ease-out;
    outline: none
}

.howwrk .loyaltycard .joinbtn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 13px;
    border: 2px solid transparent;
    transition: border-color .1s ease-out, inset .1s ease-out;
    pointer-events: none
}

.howwrk .loyaltycard .joinbtn:hover::after {
    inset: -4px;
    border-color: #faa70080
}

.howwrk .loyaltycard .joinbtn:hover {
    box-shadow: 0 8px 36px -2px #7612241c
}

.howwrk .loyaltycard .joinbtn:focus-visible {
    outline: 3px solid #FAA700 !important;
    outline-offset: 4px !important
}

.howwrk .loyaltycard .joinbtn:active {
    transform: translateY(1px)
}

@media (max-width: 1024px) {
    .howwrk .titinner {
        grid-template-columns: 220px 1fr;
        gap: 24px;
        padding: 24px
    }

    .howwrk .stepsgrid {
        grid-template-columns: repeat(2, 1fr)
    }

    .howwrk .chartblk .splitgrid {
        grid-template-columns: 1fr
    }

    .howwrk .loyaltycard {
        text-align: left
    }

    .howwrk .loyaltycard .lclist li {
        justify-content: flex-start
    }

    .howwrk .loyaltycard .lclist li::after {
        order: -1
    }
}

@media (max-width: 768px) {
    .howwrk .titinner {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .howwrk .titimg {
        max-width: 280px
    }

    .howwrk .tittxt .numval {
        font-size: 56px
    }

    .howwrk .tittxt h1 {
        font-size: 28px
    }

    .howwrk .stepsblk h2 {
        font-size: 28px
    }

    .howwrk .stepsgrid {
        grid-template-columns: 1fr
    }

    .howwrk .stepsblk .sechead {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .howwrk .chartblk h3 {
        font-size: 28px
    }

    .howwrk .stepchart .barlabel {
        width: 80px;
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .howwrk .titblk {
        padding: 48px 0 24px
    }

    .howwrk .titblk .frameborder {
        display: none
    }

    .howwrk .titinner {
        padding: 8px
    }

    .howwrk .stepsblk {
        padding: 24px 0 48px
    }

    .howwrk .chartblk {
        padding: 48px 0
    }

    .howwrk .divline,
    .howwrk .divline2 {
        margin: 24px 0
    }
}

.successPg {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 96px 24px;
    background: #18100e
}

.successPg .cardWrap {
    max-width: 560px;
    width: 100%;
    background: #221510;
    border-radius: 22px;
    padding: 48px;
    box-shadow: 0 1px 2px -2px #7612240f 0 4px 25px -2px #7612241a 0 8px 36px -2px #7612241c;
    box-sizing: border-box;
    text-align: center
}

.successPg .iconRing {
    width: 72px;
    height: 72px;
    border-radius: 36px;
    background: #2a1208;
    border: 2px solid #FAA700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 48px;
    box-shadow: 0 4px 25px -2px #faa7001a
}

.successPg .iconRing svg {
    display: block
}

.successPg .mainTitle {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #f5e8d0;
    margin: 0 0 24px
}

.successPg .mainTitle span {
    display: inline-block;
    background: #761224;
    padding: 0 8px;
    border-radius: 8px
}

.successPg .bodyTxt {
    font-size: 18px;
    line-height: 1.8;
    color: #c4a882;
    margin: 0 0 48px
}

.successPg .divLine {
    width: 48px;
    height: 2px;
    background: #FAA700;
    border-radius: 8px;
    margin: 0 auto 48px
}

.successPg .metaNote {
    font-size: 16px;
    line-height: 1.8;
    color: #8a6e52;
    margin: 0 0 48px
}

.successPg .metaNote strong {
    color: #45A9EF
}

.successPg .backBtn {
    display: inline-block;
    font-size: 16px;
    line-height: 1.2;
    color: #18100e;
    background: #FAA700;
    border: 2px solid #FAA700;
    border-radius: 13px;
    padding: 24px 48px;
    text-decoration: none;
    transition: border-color .12s ease-out, background .09s linear;
    box-sizing: border-box
}

.successPg .backBtn:hover {
    background: transparent;
    color: #FAA700;
    border-color: #FAA700;
    outline: 3px solid #faa7002e;
    outline-offset: 3px
}

.successPg .backBtn:focus {
    outline: 3px solid #45A9EF;
    outline-offset: 3px
}

.successPg .siteLbl {
    margin-top: 48px;
    font-size: 16px;
    line-height: 1.8;
    color: #5a3e2a;
    letter-spacing: .04em
}

@media (max-width: 480px) {
    .successPg .cardWrap {
        padding: 24px
    }

    .successPg .mainTitle {
        font-size: 28px
    }

    .successPg .backBtn {
        padding: 24px;
        width: 100%;
        text-align: center
    }
}