/* main.css */
/* ============================================================
   1. 메인 Hero 섹션
============================================================ */
.main-hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--spacing-100);
    padding-bottom: 0;
    background-image: url('../../../assets/images/main/main_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================================
   2. Hero 내부 2열 레이아웃
============================================================ */
.main-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--spacing-48);
    min-height: 650px;
}

/* ============================================================
   3. 좌측 텍스트 콘텐츠 영역
============================================================ */
.main-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    padding-bottom: var(--spacing-100);
}

/* ============================================================
   4. eyebrow 라벨
============================================================ */
.main-hero-label {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    white-space: nowrap;
    letter-spacing: 0;
}

/* ============================================================
   5. 메인 타이틀
============================================================ */
.main-hero-title {
    margin: 0;
    color: var(--color-text-primary);
}

/* ============================================================
   6. 문자 진입 애니메이션
============================================================ */
.main-hero-underline {
    display: inline;
    white-space: nowrap;
    color: inherit;
}

.main-hero-char {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.52s ease-out, transform 0.52s ease-out;
    transition-delay: calc(var(--hero-char-index) * 60ms);
}

.main-hero-underline.is-animated .main-hero-char {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .main-hero-char {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   7. CTA 버튼
============================================================ */
.main-hero-cta {
    margin-top: var(--spacing-64);
    height: 60px;
    padding: 0 var(--spacing-40);
    font-size: var(--font-size-body-lg);
}

/* ============================================================
   8. 우측 이미지 영역
============================================================ */
.main-hero-visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--spacing-100);
    transform: translateX(24px);
}

.main-hero-image {
    width: 100%;
    max-width: 460px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ============================================================
   통계 섹션
============================================================ */
.main-stats {
    padding: var(--section-padding-y-lg) 0;
    background-color: var(--color-bg-white);
}

/* ============================================================
   통계 목록
============================================================ */
.main-stats-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    max-width: 1040px;
    padding: var(--spacing-32) var(--spacing-32);
    margin: 0 auto;
    background: #F6F9FD;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

/* ============================================================
   통계 항목
============================================================ */
.main-stats-card {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
}

.main-stats-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 56%;
    background: var(--color-gray-20);
    transform: translateY(-50%);
}

.main-stats-inner {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--spacing-12);
    width: 100%;
    min-height: 96px;
}

.main-stats-inner::before {
    content: '';
    display: none;
    position: absolute;
    top: calc(100% - 20px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.10) 0%, rgba(124, 58, 237, 0.06) 46%, transparent 74%);
    z-index: -1;
    pointer-events: none;
}

.main-stats-card:nth-child(2) .main-stats-inner::before {
    background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.10) 0%, rgba(6, 182, 212, 0.06) 46%, transparent 74%);
}

.main-stats-card:nth-child(3) .main-stats-inner::before {
    background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.06) 46%, transparent 74%);
}

.main-stats-inner::after {
    content: '';
    order: -1;
    width: 32px;
    height: 3px;
    margin-bottom: -4px;
    border-radius: 999px;
    background: var(--color-primary);
}

.main-stats-card:nth-child(2) .main-stats-inner::after {
    background: var(--color-primary);
}

.main-stats-card:nth-child(3) .main-stats-inner::after {
    background: var(--color-primary);
}

.main-stats.is-animated .main-stats-inner::before {
    animation: main-stats-circle-in 0.6s ease-out both;
}

@keyframes main-stats-circle-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.78);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-stats.is-animated .main-stats-inner::before {
        animation: none;
    }
}

/* ============================================================
   카드 라벨 (누적 가맹점수 / 총 거래액 / 고객만족도)
============================================================ */
.main-stats-label {
    font-size: 17px;
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: var(--color-text-body);
    letter-spacing: 0;
}

/* ============================================================
   숫자 영역
============================================================ */
.main-stats-number {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.main-stats-count {
    display: inline-block;
    font-size: calc(var(--font-size-h2) + 0.25rem);
    color: #24477C;
    vertical-align: baseline;
    font-variant-numeric: tabular-nums;
}

.main-stats-unit {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    vertical-align: baseline;
    margin-left: 2px;
}

.main-stats-plus {
    display: none;
}

/* ============================================================
   반응형
============================================================ */
@media (max-width: 1024px) {
    .main-stats-list {
        max-width: 1000px;
        padding: var(--spacing-32) var(--spacing-24);
    }
    .main-stats-inner {
        min-height: 92px;
    }
    .main-stats-number {
        font-size: var(--font-size-h2-tablet);
    }
    .main-stats-count {
        font-size: calc(var(--font-size-h2-tablet) + 0.125rem);
    }
    .main-stats-unit {
        font-size: var(--font-size-ui);
    }
}

@media (max-width: 768px) {
    .main-stats-list {
        max-width: 640px;
        padding-left: var(--spacing-16);
        padding-right: var(--spacing-16);
    }
    .main-stats-inner::before {
        width: 130px;
        height: 70px;
    }
    .main-stats-card:first-child {
        margin-left: 0;
    }
    .main-stats-number {
        font-size: var(--font-size-h3);
    }
    .main-stats-count {
        font-size: 1.875rem;
    }
    .main-stats-unit {
        margin-left: 1px;
    }
}

@media (max-width: 560px) {
    .main-stats-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-16);
        max-width: none;
        width: 100%;
        padding: var(--spacing-24);
        border-radius: 20px;
        background: #FAFCFF;
        transform: none;
    }
    .main-stats-inner::before {
        width: 132px;
        height: 72px;
    }
    .main-stats-card {
        justify-content: flex-start;
        box-sizing: border-box;
        width: 100%;
    }
    .main-stats-card:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: calc(var(--spacing-16) / -2);
        left: 0;
        width: 100%;
        height: 1px;
        transform: none;
    }
    .main-stats-card:first-child {
        margin-left: 0;
    }
    .main-stats-inner {
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        min-height: 104px;
        padding: var(--spacing-12) 0;
        box-sizing: border-box;
        text-align: left;
    }
    .main-stats-inner::after {
        display: none;
    }
    .main-stats-label {
        align-self: flex-start;
        text-align: left;
    }
    .main-stats-number {
        align-self: flex-end;
        margin-top: auto;
        text-align: right;
        font-size: var(--font-size-h3);
    }
    .main-stats-count {
        font-size: 1.875rem;
    }
    .main-stats-card:nth-child(2) .main-stats-count:first-of-type + .main-stats-unit {
        font-size: 1.875rem;
        font-weight: var(--font-weight-medium);
        color: var(--color-primary-70);
        margin-left: 0;
        font-variant-numeric: tabular-nums;
    }
}

/* ============================================================
   9. 반응형
============================================================ */
@media (max-width: 1024px) {
    .main-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: auto;
    }
    .main-hero-content {
        align-items: center;
        padding-bottom: var(--spacing-32);
    }
    .main-hero-label {
        font-size: var(--font-size-h6);
    }
    .main-hero-title {
        font-size: 2.875rem;
    }
    .main-hero-visual {
        padding-bottom: 0;
        transform: none;
    }
    .main-hero-image {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .main-hero {
        padding-top: var(--spacing-48);
    }
    .main-hero-inner {
        gap: var(--spacing-24);
    }
    .main-hero-content {
        padding-bottom: var(--spacing-16);
    }
    .main-hero-title {
        font-size: 2.5rem;
    }
    .main-hero-cta {
        margin-top: var(--spacing-32);
    }
    .main-hero-image {
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .main-hero-image {
        max-width: 240px;
    }
    .main-hero-label {
        font-size: var(--font-size-ui);
    }
    .main-hero-title {
        font-size: 2.25rem;
    }
    .main-hero-cta {
        height: var(--button-height);
        padding: 0 var(--spacing-24);
        margin-top: var(--spacing-24);
    }
}

@media (max-width: 360px) {
    .main-hero-content {
        gap: var(--spacing-8);
    }
    .main-hero-title {
        font-size: 2.125rem;
    }
    .main-hero-label {
        font-size: var(--font-size-ui);
    }
    .main-hero-title {
        margin-top: 0;
    }
}

/* ============================================================
   11. main-page 변수 블록
============================================================ */
.main-page {
    --main-feature-gap: 72px;
    --main-feature-item-gap: 96px;
    --main-feature-content-max-width: 460px;
    --main-feature-item-title-size: 2.25rem;
    --main-feature-visual-max-width: 520px;
    --main-feature-visual-ratio: 1.2 / 1;
    --main-grid-cols-service: 3;
    --main-payment-service-content-width: 1120px;
    --main-payment-card-min-height: 100px;
    --main-service-card-min-height: 140px;
    --main-payment-service-card-radius: var(--radius-xl);
    --main-process-step-size: 52px;
}

/* ============================================================
   13. main-feature
============================================================ */
.main-feature {
    --main-feature-gap: 144px;
    background-color: var(--color-bg-white);
}

.main-feature-item {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--main-feature-gap);
}

.main-feature-item + .main-feature-item {
    margin-top: var(--main-feature-item-gap);
}

.main-feature-item.is-reverse .main-feature-visual {
    order: -1;
}

.main-feature-item.is-reverse {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.main-feature-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
    max-width: var(--main-feature-content-max-width);
}

.main-feature-item:not(.is-reverse) .main-feature-content {
    justify-self: end;
}

.main-feature-item.is-reverse .main-feature-content {
    justify-self: start;
}

.main-feature-item.is-reverse .main-feature-visual {
    justify-content: flex-end;
}

.main-feature-item-title {
    font-size: var(--main-feature-item-title-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.main-feature-item-desc {
    max-width: 420px;
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-base);
    color: var(--color-gray-60);
}

.main-feature-visual {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.main-feature .img-placeholder {
    max-width: var(--main-feature-visual-max-width);
    aspect-ratio: var(--main-feature-visual-ratio);
    border-radius: var(--radius-2xl);
}

.main-feature-image {
    display: block;
    width: 100%;
    max-width: var(--main-feature-visual-max-width);
    aspect-ratio: 1.6 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-2xl);
}

.main-feature-item:not(.is-reverse) .img-placeholder {
    background-color: var(--color-primary-10);
}

.main-feature-item.is-reverse .img-placeholder {
    background-color: var(--color-primary-5);
}

/* ============================================================
   14. main-review
============================================================ */
.main-review {
    background-color: var(--color-bg-white);
}

.main-review-list {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: visible;
}

.main-review-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-24);
}

.main-review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background-color: var(--color-bg-white);
    border-radius: var(--radius-xl);
    box-shadow: none;
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow var(--transition-base);
}

.main-review-card:hover {
    box-shadow: var(--shadow-md);
}

.main-review-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.main-review-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.main-review-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1.18 / 1;
    overflow: hidden;
    background-color: var(--color-primary-10);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.main-review-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    transition: transform 0.35s ease;
}

.main-review-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(         to bottom,         rgba(0, 0, 0, 0) 20%,         rgba(0, 0, 0, 0.45) 100%     );
    pointer-events: none;
}

.main-review-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.main-review-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    max-width: 46%;
    max-height: 32%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* Hover / Focus */
.main-review-card:hover .main-review-image, .main-review-link:focus-visible .main-review-image {
    transform: none;
}

.main-review-card:hover .main-review-media::after, .main-review-link:focus-visible .main-review-media::after {
    opacity: 1;
}

.main-review-card:hover .main-review-logo, .main-review-link:focus-visible .main-review-logo {
    opacity: 1;
}

.main-review-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px var(--spacing-24);
    border: 1px solid var(--color-gray-20);
    border-top: 0;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.main-review-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-8) var(--spacing-12);
    background-color: var(--color-gray-80);
    color: var(--color-text-white);
    border-radius: var(--radius-full);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    margin-bottom: var(--spacing-16);
}

.main-review-quote {
    font-size: 1.375rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    flex: 1;
}

.main-review-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--spacing-20);
    min-height: var(--spacing-32);
    color: var(--color-text-secondary);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.main-review-arrow {
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    color: var(--color-gray-40);
    transition: color var(--transition-base), transform var(--transition-base);
}

.main-review-card:hover .main-review-arrow, .main-review-link:focus-visible .main-review-arrow {
    color: var(--color-primary);
    transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .main-review-card:hover .main-review-image,     .main-review-link:focus-visible .main-review-image {
        transform: none;
        transition: none;
    }
    .main-review-card:hover .main-review-arrow,     .main-review-link:focus-visible .main-review-arrow {
        transform: none;
    }
    .main-review-arrow {
        transition-property: color;
    }
}

.main-review-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-12);
    margin-top: var(--spacing-24);
}

.main-review-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--color-gray-20);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-white);
    color: var(--color-text-secondary);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.main-review-nav-btn svg {
    width: 18px;
    height: 18px;
}

.main-review-nav-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.main-review-nav-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================
   15. main-payment / main-service
============================================================ */
.main-payment-service-wrap {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--section-padding-y-mobile) var(--spacing-48);
    background: #FAFBFC;
    border-radius: var(--radius-2xl);
}

.main-payment-service-wrap .container {
    max-width: var(--main-payment-service-content-width);
    padding-right: 0;
    padding-left: 0;
}

.main-payment, .main-service {
    padding: 0;
    background-color: transparent;
}

.main-service {
    margin-top: var(--spacing-100);
}

.main-payment .section-header-eyebrow {
    background-color: var(--color-bg-white);
}

.main-service .section-header-eyebrow {
    background-color: var(--color-bg-white);
}

.main-payment-grid, .main-service-grid {
    display: grid;
    gap: var(--spacing-24);
    margin-top: 0;
}

.main-payment-grid {
    grid-template-columns: repeat(6, 1fr);
}

.main-payment-grid > .card {
    grid-column: span 2;
    min-height: var(--main-payment-card-min-height);
}

.main-payment-grid > .card:nth-child(4), .main-payment-grid > .card:nth-child(5) {
    grid-column: span 3;
}

.main-service-grid {
    grid-template-columns: repeat(var(--main-grid-cols-service), 1fr);
}

.main-service-grid--addons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.main-service-grid > .card {
    min-height: var(--main-service-card-min-height);
}

.main-payment-grid .card, .main-service-grid .card {
    border-color: var(--color-gray-20);
    border-radius: var(--main-payment-service-card-radius);
    box-shadow: none;
}

.main-page .main-payment-grid > .card.is-entered, .main-page .main-service-grid > .card.is-entered {
    transition-delay: 0s;
}

.main-payment-grid .card:hover, .main-service-grid .card:hover {
    box-shadow: var(--shadow-md);
}

.main-payment-grid .card-body, .main-service-grid .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.main-payment-grid .card-body {
    padding: var(--spacing-20) var(--spacing-24);
}

.main-service-grid .card-body {
    padding: var(--spacing-16) var(--spacing-20);
}

.main-payment-grid .card-body:focus-visible, .main-service-grid .card-body:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.main-payment-grid .card-icon, .main-service-grid .card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: var(--service-accent-bg, var(--color-service-bg-blue));
    color: var(--service-accent-color, var(--color-service-blue));
}

.main-payment-grid [data-service-accent="blue"], .main-service-grid [data-service-accent="blue"] {
    --service-accent-color: var(--color-service-blue);
    --service-accent-bg: var(--color-service-bg-blue);
}

.main-payment-grid [data-service-accent="amber"], .main-service-grid [data-service-accent="amber"] {
    --service-accent-color: var(--color-service-amber);
    --service-accent-bg: var(--color-service-bg-amber);
}

.main-payment-grid [data-service-accent="mint"], .main-service-grid [data-service-accent="mint"] {
    --service-accent-color: var(--color-service-mint);
    --service-accent-bg: var(--color-service-bg-mint);
}

.main-payment-grid [data-service-accent="pink"], .main-service-grid [data-service-accent="pink"] {
    --service-accent-color: var(--color-service-pink);
    --service-accent-bg: var(--color-service-bg-pink);
}

.main-payment-grid [data-service-accent="violet"], .main-service-grid [data-service-accent="violet"] {
    --service-accent-color: var(--color-service-violet);
    --service-accent-bg: var(--color-service-bg-violet);
}

.main-payment-grid .card-icon svg, .main-service-grid .card-icon svg {
    width: 24px;
    height: 24px;
}

.main-payment-grid .card-title, .main-service-grid .card-title {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    transition: color var(--transition-base);
}

.main-payment-grid .card-desc, .main-service-grid .card-desc {
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.main-service-grid .card-icon {
    margin-bottom: 10px;
}

.main-service-grid .card-title {
    margin-bottom: 6px;
}

.main-service-grid .card-desc {
    margin-bottom: 10px;
}

.main-payment-grid .card-icon {
    margin-bottom: var(--spacing-12);
}

.main-payment-grid .card-desc {
    margin-bottom: var(--spacing-12);
}

.main-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    align-self: flex-end;
    margin-top: auto;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-5);
    color: var(--color-gray-40);
    transition: background-color var(--transition-base);
}

.main-card-link svg {
    width: 18px;
    height: 18px;
}

.main-payment-grid .card:hover .main-card-link, .main-service-grid .card:hover .main-card-link {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

.main-payment-grid .card:hover > .card-body .card-title, .main-service-grid .card:hover > .card-body .card-title {
    color: var(--color-primary);
}

/* Credit Card Animated Icon */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .main-payment-grid .card-body:hover .main-credit-motion-body {
        transform-box: view-box;
        transform-origin: 12px 12px;
        animation: main-credit-card-response 650ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-credit-motion-stripe {
        animation: main-credit-stripe-draw 650ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-credit-motion-detail {
        animation: main-credit-detail-reveal 650ms ease-out 1;
    }
    @keyframes main-credit-card-response {
        0% {
            transform: translateY(0) rotate(0deg);
        }
        20% {
            transform: translateY(-0.5px) rotate(-4deg);
        }
        55% {
            transform: translateY(0) rotate(-1deg);
        }
        100% {
            transform: translateY(0) rotate(0deg);
        }
    }
    @keyframes main-credit-stripe-draw {
        0%, 14% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 20;
            opacity: 0;
        }
        15% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 20;
            opacity: 1;
        }
        55%, 100% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-credit-detail-reveal {
        0%, 40% {
            transform: translateX(-2px);
            opacity: 0;
        }
        75%, 100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
}

/* Payment Method Animated Icons */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .main-payment-grid .card-body:hover .main-account-motion-frame {
        animation: main-account-frame-confirm 680ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-account-motion-point {
        transform-box: view-box;
        transform-origin: 9px 12px;
        animation: main-account-point-confirm 680ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-account-motion-line-top {
        animation: main-account-top-reveal 680ms ease-out 1;
    }
    .main-payment-grid .card-body:hover .main-account-motion-line-bottom {
        animation: main-account-bottom-reveal 680ms ease-out 1;
    }
    .main-payment-grid .card-body:hover .main-easy-motion-phone {
        transform-box: view-box;
        transform-origin: 12px 12px;
        animation: main-easy-phone-activate 640ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-easy-motion-bolt {
        animation: main-easy-bolt-activate 640ms ease-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-motion-outline {
        animation: main-global-outline-activate 700ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-motion-meridian {
        animation: main-global-meridian-connect 700ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-motion-equator {
        animation: main-global-equator-connect 700ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-easy-motion-frame {
        animation: main-global-easy-frame-activate 660ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-easy-motion-stripe {
        animation: main-global-easy-stripe-draw 660ms ease-in-out 1;
    }
    .main-payment-grid .card-body:hover .main-global-easy-motion-mark {
        animation: main-global-easy-mark-reveal 660ms ease-out 1;
    }
    @keyframes main-account-frame-confirm {
        0%, 100% {
            transform: translateY(0);
        }
        18% {
            transform: translateY(-0.6px);
        }
        38% {
            transform: translateY(0);
        }
    }
    @keyframes main-account-point-confirm {
        0%, 16%, 48%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        30% {
            transform: scale(0.9);
            opacity: 0.7;
        }
    }
    @keyframes main-account-top-reveal {
        0%, 30% {
            stroke-dasharray: 2 2;
            stroke-dashoffset: 2;
            opacity: 0;
            transform: translateX(-0.5px);
        }
        31% {
            stroke-dasharray: 2 2;
            stroke-dashoffset: 2;
            opacity: 1;
            transform: translateX(-0.5px);
        }
        58%, 100% {
            stroke-dasharray: 2 2;
            stroke-dashoffset: 0;
            opacity: 1;
            transform: translateX(0);
        }
    }
    @keyframes main-account-bottom-reveal {
        0%, 45% {
            stroke-dasharray: 2 2;
            stroke-dashoffset: 2;
            opacity: 0;
            transform: translateX(-0.5px);
        }
        46% {
            stroke-dasharray: 2 2;
            stroke-dashoffset: 2;
            opacity: 1;
            transform: translateX(-0.5px);
        }
        76%, 100% {
            stroke-dasharray: 2 2;
            stroke-dashoffset: 0;
            opacity: 1;
            transform: translateX(0);
        }
    }
    @keyframes main-easy-phone-activate {
        0%, 100% {
            transform: rotate(0deg);
        }
        20% {
            transform: rotate(-2.5deg);
        }
        50% {
            transform: rotate(-0.5deg);
        }
    }
    @keyframes main-easy-bolt-activate {
        0%, 17% {
            stroke-dasharray: 16 16;
            stroke-dashoffset: 16;
            opacity: 0;
            transform: translateY(0);
        }
        18% {
            stroke-dasharray: 16 16;
            stroke-dashoffset: 16;
            opacity: 1;
            transform: translateY(0);
        }
        55% {
            stroke-dasharray: 16 16;
            stroke-dashoffset: 0;
            opacity: 1;
            transform: translateY(0);
        }
        66% {
            stroke-dasharray: 16 16;
            stroke-dashoffset: 0;
            opacity: 1;
            transform: translateY(-0.6px);
        }
        82%, 100% {
            stroke-dasharray: 16 16;
            stroke-dashoffset: 0;
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes main-global-outline-activate {
        0%, 38%, 100% {
            opacity: 1;
        }
        18% {
            opacity: 0.75;
        }
    }
    @keyframes main-global-meridian-connect {
        0%, 14% {
            stroke-dasharray: 48 48;
            stroke-dashoffset: 48;
            opacity: 0;
        }
        15% {
            stroke-dasharray: 48 48;
            stroke-dashoffset: 48;
            opacity: 1;
        }
        60%, 100% {
            stroke-dasharray: 48 48;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-global-equator-connect {
        0%, 42% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 20;
            opacity: 0;
        }
        43% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 20;
            opacity: 1;
        }
        80%, 100% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-global-easy-frame-activate {
        0%, 100% {
            transform: translateX(0);
            opacity: 1;
        }
        18% {
            transform: translateX(-0.6px);
            opacity: 0.85;
        }
        42% {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes main-global-easy-stripe-draw {
        0%, 21% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 20;
            opacity: 0;
        }
        22% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 20;
            opacity: 1;
        }
        58%, 100% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-global-easy-mark-reveal {
        0%, 52% {
            opacity: 0;
        }
        80%, 100% {
            opacity: 1;
        }
    }
}

/* Service Animated Icons */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .main-service-grid .card-body:hover .main-service-manual-motion-frame {
        animation: main-service-manual-frame 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-manual-motion-stripe {
        animation: main-service-manual-stripe 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-manual-motion-input {
        animation: main-service-manual-input 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-manual-motion-check {
        animation: main-service-manual-check 680ms ease-out 1;
    }
    .main-service-grid .card-body:hover .main-service-sms-motion-envelope {
        transform-box: view-box;
        transform-origin: 12px 12px;
        animation: main-service-sms-envelope 660ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-sms-motion-flap {
        animation: main-service-sms-flap 660ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-recurring-motion-calendar {
        animation: main-service-recurring-calendar 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-recurring-motion-header {
        animation: main-service-recurring-header 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-recurring-motion-clock {
        animation: main-service-recurring-clock 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-recurring-motion-hands {
        transform-box: view-box;
        transform-origin: 16px 16px;
        animation: main-service-recurring-hands 720ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-link-motion-left {
        animation: main-service-link-left 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-link-motion-right {
        animation: main-service-link-right 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-link-motion-bridge {
        animation: main-service-link-bridge 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-api-motion-left {
        animation: main-service-api-left 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-api-motion-data {
        animation: main-service-api-data 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-api-motion-right {
        animation: main-service-api-right 680ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-frame {
        animation: main-service-settlement-frame 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-display {
        animation: main-service-settlement-display 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-keys-top {
        animation: main-service-settlement-keys-top 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-keys-middle {
        animation: main-service-settlement-keys-middle 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-keys-bottom {
        animation: main-service-settlement-keys-bottom 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-settlement-motion-total {
        animation: main-service-settlement-total 740ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-payout-motion-frame {
        animation: main-service-payout-frame 700ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-payout-motion-coin {
        transform-box: view-box;
        transform-origin: 12px 12px;
        animation: main-service-payout-coin 700ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-payout-motion-shaft {
        animation: main-service-payout-shaft 700ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-payout-motion-arrowhead {
        animation: main-service-payout-arrowhead 700ms ease-out 1;
    }
    @keyframes main-service-manual-frame {
        0%, 100% {
            transform: translateY(0);
        }
        18% {
            transform: translateY(-0.5px);
        }
        40% {
            transform: translateY(0);
        }
    }
    @keyframes main-service-manual-stripe {
        0%, 14% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 20;
            opacity: 0;
        }
        15% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 20;
            opacity: 1;
        }
        43%, 100% {
            stroke-dasharray: 20 20;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-manual-input {
        0%, 32% {
            stroke-dasharray: 2 2;
            stroke-dashoffset: 2;
            opacity: 0;
        }
        33% {
            stroke-dasharray: 2 2;
            stroke-dashoffset: 2;
            opacity: 1;
        }
        58%, 100% {
            stroke-dasharray: 2 2;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-manual-check {
        0%, 52% {
            stroke-dasharray: 9 9;
            stroke-dashoffset: 9;
            opacity: 0;
        }
        53% {
            stroke-dasharray: 9 9;
            stroke-dashoffset: 9;
            opacity: 1;
        }
        86%, 100% {
            stroke-dasharray: 9 9;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-sms-envelope {
        0%, 100% {
            transform: rotate(0deg);
        }
        18% {
            transform: rotate(-2deg);
        }
        45% {
            transform: rotate(0deg);
        }
    }
    @keyframes main-service-sms-flap {
        0%, 19% {
            stroke-dasharray: 26 26;
            stroke-dashoffset: 26;
            opacity: 0;
            transform: translateY(0);
        }
        20% {
            stroke-dasharray: 26 26;
            stroke-dashoffset: 26;
            opacity: 1;
            transform: translateY(0);
        }
        56% {
            stroke-dasharray: 26 26;
            stroke-dashoffset: 0;
            opacity: 1;
            transform: translateY(0);
        }
        72% {
            stroke-dasharray: 26 26;
            stroke-dashoffset: 0;
            opacity: 1;
            transform: translateY(-0.6px);
        }
        100% {
            stroke-dasharray: 26 26;
            stroke-dashoffset: 0;
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes main-service-recurring-calendar {
        0%, 38%, 100% {
            opacity: 1;
        }
        16% {
            opacity: 0.75;
        }
    }
    @keyframes main-service-recurring-header {
        0%, 12% {
            stroke-dasharray: 6 6;
            stroke-dashoffset: 6;
            opacity: 0;
        }
        13% {
            stroke-dasharray: 6 6;
            stroke-dashoffset: 6;
            opacity: 1;
        }
        35%, 100% {
            stroke-dasharray: 6 6;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-recurring-clock {
        0%, 22% {
            stroke-dasharray: 38 38;
            stroke-dashoffset: 38;
            opacity: 0;
        }
        23% {
            stroke-dasharray: 38 38;
            stroke-dashoffset: 38;
            opacity: 1;
        }
        52%, 100% {
            stroke-dasharray: 38 38;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-recurring-hands {
        0%, 32% {
            transform: rotate(0deg);
        }
        84%, 100% {
            transform: rotate(360deg);
        }
    }
    @keyframes main-service-link-left {
        0%, 100% {
            transform: translateX(0);
        }
        20% {
            transform: translateX(-1px);
        }
        60% {
            transform: translateX(0);
        }
    }
    @keyframes main-service-link-right {
        0%, 100% {
            transform: translateX(0);
        }
        28% {
            transform: translateX(1px);
        }
        68% {
            transform: translateX(0);
        }
    }
    @keyframes main-service-link-bridge {
        0%, 35% {
            stroke-dasharray: 8 8;
            stroke-dashoffset: 8;
            opacity: 0;
        }
        36% {
            stroke-dasharray: 8 8;
            stroke-dashoffset: 8;
            opacity: 1;
        }
        78%, 100% {
            stroke-dasharray: 8 8;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-api-left {
        0%, 90%, 100% {
            transform: translateX(0);
        }
        25%, 60% {
            transform: translateX(-1px);
        }
    }
    @keyframes main-service-api-data {
        0%, 25% {
            stroke-dasharray: 17 17;
            stroke-dashoffset: 17;
            opacity: 0;
        }
        26% {
            stroke-dasharray: 17 17;
            stroke-dashoffset: 17;
            opacity: 1;
        }
        60%, 100% {
            stroke-dasharray: 17 17;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-api-right {
        0%, 90%, 100% {
            transform: translateX(0);
        }
        25%, 60% {
            transform: translateX(1px);
        }
    }
    @keyframes main-service-settlement-frame {
        0%, 22%, 100% {
            opacity: 1;
        }
        10% {
            opacity: 0.85;
        }
    }
    @keyframes main-service-settlement-display {
        0%, 48% {
            stroke-dasharray: 8 8;
            stroke-dashoffset: 8;
            opacity: 0;
        }
        49% {
            stroke-dasharray: 8 8;
            stroke-dashoffset: 8;
            opacity: 1;
        }
        74%, 100% {
            stroke-dasharray: 8 8;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-settlement-keys-top {
        0%, 12%, 28%, 100% {
            opacity: 1;
        }
        20% {
            opacity: 0.55;
        }
    }
    @keyframes main-service-settlement-keys-middle {
        0%, 22%, 38%, 100% {
            opacity: 1;
        }
        30% {
            opacity: 0.55;
        }
    }
    @keyframes main-service-settlement-keys-bottom {
        0%, 32%, 48%, 100% {
            opacity: 1;
        }
        40% {
            opacity: 0.55;
        }
    }
    @keyframes main-service-settlement-total {
        0%, 74% {
            stroke-dasharray: 4 4;
            stroke-dashoffset: 4;
            opacity: 0;
        }
        75% {
            stroke-dasharray: 4 4;
            stroke-dashoffset: 4;
            opacity: 1;
        }
        92%, 100% {
            stroke-dasharray: 4 4;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-payout-frame {
        0%, 35%, 100% {
            opacity: 1;
        }
        16% {
            opacity: 0.75;
        }
    }
    @keyframes main-service-payout-coin {
        0%, 15%, 48%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        30% {
            transform: scale(0.9);
            opacity: 0.7;
        }
    }
    @keyframes main-service-payout-shaft {
        0%, 32% {
            stroke-dasharray: 6 6;
            stroke-dashoffset: 6;
            opacity: 0;
        }
        33% {
            stroke-dasharray: 6 6;
            stroke-dashoffset: 6;
            opacity: 1;
        }
        65%, 100% {
            stroke-dasharray: 6 6;
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }
    @keyframes main-service-payout-arrowhead {
        0%, 48% {
            transform: translateY(-1px);
            opacity: 0;
        }
        80%, 100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* ============================================================
   16. main-process
============================================================ */
.main-process {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    background-color: var(--color-bg-white);
}

.main-process-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing-80) + var(--spacing-8));
    max-width: 1100px;
    margin: 0 auto;
}

.main-process-content {
    width: 100%;
    max-width: none;
}

.main-process .section-header {
    align-items: center;
    margin-bottom: 0;
    text-align: center;
    gap: var(--spacing-8);
}

.main-process .section-header-eyebrow {
    padding: 6px var(--spacing-16);
    border: 1px solid var(--color-primary-10);
    border-radius: var(--radius-full);
    outline: 0;
    background-color: var(--color-primary-light);
    box-shadow: none;
    color: var(--color-primary);
    font-size: var(--font-size-ui);
    text-align: center;
    user-select: none;
}

.main-process .section-header-eyebrow::selection {
    background-color: transparent;
}

.main-process .section-header-title {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 0;
    text-align: center;
}

.main-process .section-header-title::after {
    display: none;
}

.main-process-title-point {
    color: var(--color-primary);
}

.main-process-flow {
    position: relative;
    width: 100%;
}

.main-process-bar {
    position: absolute;
    top: var(--spacing-4);
    right: 0;
    left: 0;
    height: 44px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: linear-gradient(         90deg,         #DCEAFF 0%,         #BCD8FF 28%,         #9EDBFA 52%,         #82DDEB 76%,         #9FE5E8 100%     );
}

.main-process-bar-highlight {
    display: block;
    width: 34%;
    height: 100%;
    opacity: 0;
    background: linear-gradient(         90deg,         rgba(255, 255, 255, 0) 0%,         rgba(255, 255, 255, 0.20) 30%,         rgba(255, 255, 255, 0.72) 50%,         rgba(255, 255, 255, 0.20) 70%,         rgba(255, 255, 255, 0) 100%     );
    transform: translateX(-110%);
}

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .main-process-flow.is-motion-active .main-process-bar-highlight {
        animation: main-process-bar-sweep 4s linear infinite;
    }
}

.main-process-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-24);
    margin: 0;
    list-style: none;
    padding: 0;
}

@media (min-width: 769px) {
    .main-process {
        padding-top: var(--spacing-100);
        padding-bottom: var(--spacing-100);
    }
    .main-process .section-header-title {
        white-space: nowrap;
    }
}

@media (min-width: 1025px) {
    .main-page {
        --main-pc-section-inset: 120px;
    }
    .main-page .main-stats,     .main-page .main-feature,     .main-page .main-review,     .main-page .main-payment-service-wrap,     .main-page .main-process,     .main-page .main-trust {
        padding-top: var(--main-pc-section-inset);
        padding-bottom: var(--main-pc-section-inset);
    }
    .main-page .main-service {
        margin-top: var(--main-pc-section-inset);
    }
    .main-page .main-pricing {
        padding-top: var(--spacing-100);
        padding-bottom: var(--spacing-100);
    }
    .main-page .main-payment-service-wrap {
        max-width: none;
        padding-inline: max(var(--spacing-48), calc((100% - var(--container-max-width)) / 2 + var(--spacing-48)));
        border-radius: 0;
    }
    .main-pricing-item {
        align-content: center;
    }
    .main-pricing-label {
        align-self: start;
    }
}

.main-process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-20);
    min-height: 0;
    padding: 0;
    background-color: transparent;
    text-align: center;
}

.main-process-step {
    width: var(--main-process-step-size);
    height: var(--main-process-step-size);
    border: 2px solid var(--color-primary-20);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-white);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body-lg);
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .main-process-item:nth-child(1) .main-process-step {
        border-color: #76A9EA;
    }
    .main-process-item:nth-child(2) .main-process-step {
        border-color: #72B0E7;
    }
    .main-process-item:nth-child(3) .main-process-step {
        border-color: #6DB9E2;
    }
    .main-process-item:nth-child(4) .main-process-step {
        border-color: #68C0DD;
    }
}

.main-process-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    min-width: 0;
}

.main-process-item-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.main-process-item-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

@keyframes main-process-bar-sweep {
    0% {
        opacity: 0;
        transform: translateX(-110%);
    }
    4.2% {
        opacity: 0.7;
    }
    28.7% {
        opacity: 0.45;
    }
    35% {
        opacity: 0;
        transform: translateX(400%);
    }
    100% {
        opacity: 0;
        transform: translateX(400%);
    }
}

@keyframes main-process-bar-sweep-vertical {
    0% {
        opacity: 0;
        transform: translateY(-110%);
    }
    4.2% {
        opacity: 0.7;
    }
    28.7% {
        opacity: 0.45;
    }
    35% {
        opacity: 0;
        transform: translateY(400%);
    }
    100% {
        opacity: 0;
        transform: translateY(400%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-process-bar-highlight {
        animation: none;
    }
}

/* ============================================================
   17. main-trust
============================================================ */
.main-trust {
    --main-trust-primary: #1A4FD6;
    --main-trust-card-border: #DCE3EE;
    --main-trust-panel-border: #E3E8F0;
    background-color: var(--color-bg-white);
}

.main-trust-inner {
    max-width: 1120px;
    margin: 0 auto;
}

.main-trust .section-header {
    text-align: center;
}

.main-trust-list {
    display: grid;
}

.main-trust-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(min-content, 1fr);
    row-gap: var(--spacing-8);
    height: auto;
    min-height: 284px;
    padding: 36px;
    border: 1px solid var(--main-trust-card-border);
    border-radius: var(--radius-2xl);
    background: #F8FAFE;
}

.main-trust-item-text {
    grid-row: 1;
    min-width: 0;
}

.main-trust-item-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    margin: 0 0 var(--spacing-8);
    color: var(--color-text-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.main-trust-item-desc {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: var(--font-weight-regular);
    line-height: 1.65;
    word-break: keep-all;
}

.main-trust-item-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    border-radius: var(--radius-full);
    background-color: var(--color-text-primary);
    color: var(--color-text-white);
}

.main-trust-item-check svg {
    width: 12px;
    height: 12px;
}

.main-trust-item-visual {
    grid-row: 2;
    justify-self: end;
    align-self: end;
    max-width: 100%;
    min-width: 0;
    pointer-events: none;
}

.main-trust-item:nth-child(even) {
    grid-template-rows: minmax(min-content, 1fr) auto;
}

.main-trust-item:nth-child(even) .main-trust-item-text {
    grid-row: 2;
    align-self: end;
}

.main-trust-item:nth-child(even) .main-trust-item-visual {
    grid-row: 1;
    align-self: start;
}

.main-trust-monitor-panel, .main-trust-code-window {
    position: relative;
    width: 248px;
    height: 104px;
    padding: var(--spacing-16);
    border: 1px solid var(--main-trust-panel-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-white);
    box-shadow: 0 8px 20px rgba(20, 40, 90, 0.06);
}

.main-trust-monitor-panel {
    height: 118px;
    padding: var(--spacing-12) var(--spacing-16);
}

.main-trust-code-window {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.main-trust-editor-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    height: 24px;
    flex-shrink: 0;
    padding: 0 var(--spacing-12);
    border-bottom: 1px solid var(--main-trust-panel-border);
    background-color: var(--color-gray-5);
}

.main-trust-window-dots {
    display: flex;
    gap: var(--spacing-4);
}

.main-trust-window-dots i {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-30);
}

.main-trust-editor-tab {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-8);
    border-right: 1px solid var(--main-trust-panel-border);
    border-left: 1px solid var(--main-trust-panel-border);
    background-color: var(--color-bg-white);
    color: var(--color-text-secondary);
    font-family: monospace;
    font-size: 9px;
}

.main-trust-code-content {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--spacing-8);
    padding: 5px var(--spacing-12) 5px var(--spacing-8);
    font-family: monospace;
    font-size: 9px;
    line-height: 13px;
}

.main-trust-line-numbers {
    display: flex;
    flex-direction: column;
    padding-right: 6px;
    border-right: 1px solid var(--main-trust-panel-border);
    color: var(--color-gray-40);
    text-align: right;
}

.main-trust-line-numbers > span {
    height: 13px;
}

.main-trust-code-lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.main-trust-code-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    height: 13px;
    flex-shrink: 0;
    transform-origin: left;
}

.main-trust-code-mark {
    color: var(--color-text-secondary);
}

.main-trust-chat-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 248px;
    height: 124px;
    padding: 11px 13px;
}

.main-trust-chat {
    display: block;
    padding: 5px 10px;
    border-radius: 12px 12px 12px 4px;
    font-size: 12px;
    line-height: 1.4;
}

.main-trust-chat-primary {
    align-self: flex-end;
    border-radius: 12px 12px 4px 12px;
}

@media (min-width: 1024px) {
    .main-trust-code-window {
        transform-origin: right bottom;
    }
    .main-trust-chat-group {
        position: relative;
    }
    .main-trust-chat {
        flex-shrink: 0;
    }
}

.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-chat {
    opacity: 0;
}

.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-code-line {
    transform: scaleX(0);
}

.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-chat {
    transform: translateY(8px);
}

.main-trust [data-motion].is-ready.is-visible .main-trust-code-line {
    animation: main-trust-code-show 0.4s ease both;
}

.main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(2) {
    animation-delay: 0.3s;
}

.main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(3) {
    animation-delay: 0.6s;
}

.main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(4) {
    animation-delay: 0.9s;
}

.main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(5) {
    animation-delay: 1.2s;
}

.main-trust [data-motion].is-ready.is-visible .main-trust-chat {
    animation: main-trust-content-show 0.4s ease both;
}

.main-trust [data-motion].is-ready.is-visible .main-trust-chat:nth-child(2) {
    animation-delay: 0.5s;
}

.main-trust [data-motion].is-ready.is-visible .main-trust-chat:nth-child(3) {
    animation-delay: 1s;
}

@keyframes main-trust-content-show {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes main-trust-code-show {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@media (max-width: 1023px) {
    .main-trust-item,     .main-trust-item:nth-child(even) {
        height: auto;
        min-height: 296px;
        padding: var(--spacing-24);
        grid-template-rows: auto 1fr;
        row-gap: var(--spacing-24);
    }
    .main-trust-item:nth-child(even) .main-trust-item-text {
        grid-row: 1;
        align-self: start;
    }
    .main-trust-item:nth-child(even) .main-trust-item-visual {
        grid-row: 2;
        align-self: end;
    }
}

@media (max-width: 768px) {
    .main-trust {
        padding: var(--spacing-80) 0;
    }
}

@media (max-width: 480px) {
    .main-trust {
        padding: calc(var(--spacing-64) - var(--spacing-8)) 0;
    }
    .main-trust-item,     .main-trust-item:nth-child(even) {
        padding: var(--spacing-24);
        min-height: 296px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-page .main-trust [data-motion].is-ready .main-trust-chat {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .main-page .main-trust [data-motion].is-ready .main-trust-code-line {
        animation: none;
        transform: none;
    }
}

@media (min-width:1024px) {
    .main-trust-list {
        gap: 16px
    }
    .main-trust-item,.main-trust-item:nth-child(even) {
        display: block;
        min-height: 0;
        height: auto;
        padding: 24px;
        border-radius: 10px;
        position: relative
    }
    .main-trust-item-monitor {
        grid-template-columns: 250px minmax(0,1fr);
        grid-template-rows: auto!important;
        gap: 24px;
        align-items: center
    }
    .main-trust-item-text,.main-trust-item:nth-child(even) .main-trust-item-text {
        grid-row: auto;
        align-self: auto
    }
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual {
        grid-row: auto;
        align-self: auto
    }
    .main-trust-item-title {
        gap: 9px;
        margin: 0;
        letter-spacing: -.4px
    }
    .main-trust-item-desc {
        letter-spacing: -.35px
    }
    .main-trust-item-check {
        width: 20px;
        height: 20px;
        flex: 0 0 20px
    }
    .main-trust-monitor-panel {
        left: auto;
        top: auto;
        width: 100%;
        height: 156px;
        padding: 8px 12px;
        border-radius: 8px;
        box-shadow: none
    }
    .main-trust-code-window {
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        border-radius: 6px;
        box-shadow: none
    }
    .main-trust-editor-toolbar {
        height: 30px;
        gap: 20px;
        padding: 0 12px
    }
    .main-trust-window-dots {
        gap: 6px
    }
    .main-trust-window-dots i {
        width: 8px;
        height: 8px;
        background: #ff786a
    }
    .main-trust-window-dots i:nth-child(2) {
        background: var(--color-service-amber)
    }
    .main-trust-window-dots i:nth-child(3) {
        background: var(--color-service-mint)
    }
    .main-trust-editor-tab {
        font-size: 11px
    }
    .main-trust-code-content {
        padding: 14px;
        gap: 12px;
        font-size: 12px;
        line-height: 20px
    }
    .main-trust-line-numbers>span,.main-trust-code-line {
        height: 20px
    }
    .main-trust-chat-group {
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        padding: 0;
        gap: 10px
    }
    .main-trust-chat {
        padding: 11px 18px;
        font-size: 14px;
        border-radius: 16px;
        white-space: nowrap
    }
    .main-trust-chat-left,.main-trust-chat-right {
        margin-left: 0
    }
}

.main-trust-anomaly-graph {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible
}

.main-trust-anomaly-grid {
    stroke: var(--color-gray-10);
    stroke-width: 1
}

.main-trust-normal-band {
    fill: var(--color-service-bg-violet)
}

.main-trust-transaction-line {
    stroke: color-mix(in srgb,var(--color-service-violet) 55%,var(--color-bg-white));
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0
}

.main-trust-warning-point {
    fill: var(--color-warning);
    stroke: var(--color-bg-white);
    stroke-width: 2
}

.main-trust-warning-ring {
    fill: none;
    stroke: var(--color-warning);
    stroke-width: 2;
    opacity: .4;
    transform-box: fill-box;
    transform-origin: center
}

.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-transaction-line {
    stroke-dashoffset: 1
}

.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-warning-point,.main-trust [data-motion].is-ready:not(.is-visible) .main-trust-warning-ring {
    opacity: 0
}

.main-trust [data-motion].is-ready.is-visible .main-trust-transaction-line {
    animation: main-trust-transaction-draw 2.2s ease-in-out both
}

.main-trust [data-motion].is-ready.is-visible .main-trust-warning-point {
    animation: main-trust-warning-show .2s ease 1.55s both
}

.main-trust [data-motion].is-ready.is-visible .main-trust-warning-ring {
    animation: main-trust-warning-pulse .65s ease-out 1.6s 2 both
}

@keyframes main-trust-transaction-draw {
    from {
        stroke-dashoffset: 1
    }
    to {
        stroke-dashoffset: 0
    }
}

@keyframes main-trust-warning-show {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes main-trust-warning-pulse {
    0% {
        transform: scale(.65);
        opacity: .75
    }
    80% {
        transform: scale(1.8);
        opacity: 0
    }
    100% {
        transform: scale(1);
        opacity: .4
    }
}

@media(prefers-reduced-motion:reduce) {
    .main-page .main-trust [data-motion].is-ready .main-trust-transaction-line {
        animation: none;
        stroke-dashoffset: 0
    }
    .main-page .main-trust [data-motion].is-ready .main-trust-warning-point {
        animation: none;
        opacity: 1
    }
    .main-page .main-trust [data-motion].is-ready .main-trust-warning-ring {
        animation: none;
        opacity: .4;
        transform: none
    }
}

@media(min-width:1024px) {
    .main-trust {
        --main-trust-polish-surface: #FAFBFD;
    }
    .main-trust-item,.main-trust-item:nth-child(even) {
        background: var(--main-trust-polish-surface);
        border-radius: var(--radius-2xl);
        padding: 28px;
    }
    .main-trust-item-title {
        font-size: 20px;
        line-height: 1.1;
        margin-bottom: 12px;
    }
    .main-trust-item-desc {
        font-size: 16px;
        font-weight: var(--font-weight-regular);
        line-height: 1.6;
        color: var(--color-text-body);
    }
    .main-trust-monitor-panel,.main-trust-code-window {
        border-radius: var(--radius-xl);
    }
    .main-trust-chat-group {
        margin-top: 24px;
    }
}

@media(min-width:1024px) {
    .main-trust-list {
        grid-template-columns: 356px minmax(0,1fr) minmax(0,1fr);
        grid-template-rows: 200px 312px;
    }
    .main-trust-item-register {
        grid-area: register;
    }
    .main-trust-item-custom {
        grid-area: development;
        grid-template-columns: 250px minmax(0,1fr);
        grid-template-rows: auto;
        gap: 24px;
        align-items: center;
    }
    .main-trust-item-monitor {
        grid-area: monitoring;
        display: block!important;
    }
    .main-trust-item-support {
        grid-area: support;
    }
    .main-trust-item-monitor .main-trust-monitor-panel {
        margin-top: 24px;
    }
}

@media(min-width:1024px) {
    .main-trust-list {
        grid-template-areas: "development register register" "development monitoring support";
    }
    .main-trust-item-register {
        display: grid;
        grid-template-columns: 250px minmax(0,1fr);
        grid-template-rows: auto;
        align-items: center;
        gap: 24px;
    }
    .main-trust-item-custom .main-trust-code-window {
        height: 282px;
    }
    .main-trust-item-custom .main-trust-code-content {
        padding: 18px 12px;
        gap: 10px;
        line-height: 26px;
    }
    .main-trust-item-custom .main-trust-code-line,.main-trust-item-custom .main-trust-line-numbers>span {
        height: 26px;
    }
    .main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(6) {
        animation-delay: 1.5s;
    }
    .main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(7) {
        animation-delay: 1.8s;
    }
    .main-trust [data-motion].is-ready.is-visible .main-trust-code-line:nth-child(8) {
        animation-delay: 2.1s;
    }
}

@media(max-width:1023px) {
    .main-trust-code-extra {
        display: none;
    }
}

@media(min-width:1024px) {
    .main-trust-item-custom {
        display: flex;
        flex-direction: column;
    }
    .main-trust-item-custom .main-trust-item-text {
        align-self: stretch;
        text-align: left;
    }
    .main-trust-item-custom .main-trust-code-window {
        margin-top: auto;
        flex-shrink: 0;
    }
}

@media(min-width:1024px) and (max-width:1199px) {
    .main-trust-list {
        grid-template-columns: minmax(300px,.95fr) minmax(0,1fr) minmax(0,1fr);
    }
    .main-trust-item-register {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 16px;
    }
}

@media(max-width:1023px) {
    .main-trust-list {
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-template-rows: none;
        grid-template-areas: none;
        gap: 24px;
    }
    .main-trust-item,.main-trust-item:nth-child(even) {
        display: flex;
        flex-direction: column;
        grid-area: auto;
        grid-column: auto;
        grid-row: auto;
        height: auto;
        min-height: 296px;
        padding: 24px;
        border-radius: var(--radius-2xl);
        gap: 24px;
    }
    .main-trust-item-text,.main-trust-item:nth-child(even) .main-trust-item-text {
        grid-row: auto;
        align-self: stretch;
    }
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        grid-row: auto;
        max-width: 100%;
    }
    .main-trust-chat-group {
        height: auto;
    }
    .main-trust-chat-left,.main-trust-chat-right {
        margin-left: 0;
    }
}

@media(max-width:1023px) {
    .main-trust-item-text,.main-trust-item:nth-child(even) .main-trust-item-text {
        text-align: left;
    }
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual {
        align-self: center;
    }
}

@media(min-width:768px) and (max-width:1023px) {
    .main-trust-list {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media(max-width:767px) {
    .main-trust-list {
        grid-template-columns: minmax(0,1fr);
    }
}

@media(max-width:1023px) {
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual {
        margin-top: auto;
        flex-shrink: 0;
    }
    .main-trust-item-custom .main-trust-code-window {
        margin-top: auto;
    }
    .main-trust-chat-group {
        width: 264px;
        padding: 8px 8px;
        gap: 6px;
    }
    .main-trust-chat {
        font-size: 13px;
        padding: 7px 14px;
    }
}

@media(max-width:480px) {
    .main-trust-item-visual,.main-trust-item:nth-child(even) .main-trust-item-visual {
        align-self: flex-end;
    }
}

.main-trust-item-custom .main-trust-code-line:nth-child(n) {
    gap: 0;
    padding-left: 0;
    white-space: pre;
}

.main-trust-item-custom .main-trust-code-line:nth-child(2), .main-trust-item-custom .main-trust-code-line:nth-child(3), .main-trust-item-custom .main-trust-code-line:nth-child(6), .main-trust-item-custom .main-trust-code-line:nth-child(8) {
    padding-left: 2ch;
}

.main-trust-item-custom .main-trust-code-line:nth-child(7) {
    padding-left: 4ch;
}

.main-trust-code-line > span {
    flex-shrink: 0;
}

.main-trust-code-window .main-trust-code-mark {
    color: var(--color-text-primary);
}

.main-trust-code-window .main-trust-code-line .main-trust-code-token {
    color: var(--main-trust-primary);
}

.main-trust-code-window .main-trust-code-line .main-trust-code-string {
    color: color-mix(in srgb, var(--color-service-mint) 60%, var(--color-text-primary));
}

.main-trust-code-window .main-trust-code-line .main-trust-code-function {
    color: var(--color-service-violet);
}

.main-trust-code-window .main-trust-code-line .main-trust-code-number {
    color: #B45309;
}

.main-trust-chat-group .main-trust-chat {
    background-color: color-mix(in srgb, var(--color-primary-10) 65%, var(--color-bg-white));
    color: var(--color-text-title-on-tint);
    white-space: nowrap;
}

.main-trust-chat-group .main-trust-chat-primary {
    background-color: color-mix(in srgb, var(--color-service-mint) 27%, var(--color-bg-white));
    color: var(--color-text-primary);
}

.main-trust-item-register .main-trust-register-graphic {
    position: relative;
    width: min(100%, 340px);
    aspect-ratio: 340 / 168;
    container-type: inline-size;
    margin-top: 0;
}

.main-trust-register-badge {
    position: absolute;
    left: calc(108 / 340 * 100%);
    top: calc(12 / 168 * 100%);
    width: calc(144 / 340 * 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.main-trust-register-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-primary-5);
    pointer-events: none;
    --main-trust-halo-pulse-scale: 1.08;
    --main-trust-halo-pulse-opacity: .86;
}

.main-trust-register-inner {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(104 / 144 * 100%);
    aspect-ratio: 1;
    border-radius: 50%;
}

.main-trust-register-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-primary-10);
    pointer-events: none;
    --main-trust-halo-pulse-scale: 1.04;
    --main-trust-halo-pulse-opacity: .96;
}

.main-trust-register-shield {
    position: relative;
    z-index: 1;
    display: block;
    width: calc(63 / 104 * 100%);
    height: auto;
    aspect-ratio: 1;
    filter: drop-shadow(0 calc(8 / 340 * 100cqw) calc(14 / 340 * 100cqw) rgba(26,79,214,.3));
}

.main-trust-register-shield {
    color: var(--color-primary);
}

.main-trust-register-shield > path:first-child {
    fill: currentColor;
}

.main-trust-register-shield > path:last-child {
    stroke: var(--color-text-white);
}

.main-trust-register-tile {
    position: absolute;
    display: grid;
    place-items: center;
    width: calc(58 / 340 * 100%);
    aspect-ratio: 1;
    border-radius: calc(16 / 340 * 100cqw);
    background: var(--color-bg-white);
    box-shadow: 0 calc(8 / 340 * 100cqw) calc(18 / 340 * 100cqw) rgba(20,40,90,.10);
}

.main-trust-register-tile svg {
    display: block;
    width: calc(27 / 58 * 100%);
    height: auto;
    aspect-ratio: 1;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.main-trust-register-tile-document {
    left: calc(66 / 340 * 100%);
    top: calc(58 / 168 * 100%);
    color: var(--color-icon-teal);
}

.main-trust-register-tile-list {
    left: calc(221 / 340 * 100%);
    top: calc(1 / 168 * 100%);
    color: var(--color-service-violet);
}

.main-trust-register-tile-lock {
    left: calc(221 / 340 * 100%);
    top: calc(115 / 168 * 100%);
    color: var(--color-warning);
}

@media (min-width: 1024px) {
    .main-trust-item-register .main-trust-register-graphic {
        width: calc(142px * 340 / 168);
        justify-self: end;
    }
}

@media (max-width: 1023px) {
    .main-trust-item-register .main-trust-register-graphic {
        width: min(100%, 300px, calc(137px * 340 / 168));
        align-self: center;
        margin-top: auto;
        flex-shrink: 0;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .main-trust-item-register .main-trust-register-graphic {
        width: calc(137px * 360 / 168);
        aspect-ratio: 360 / 168;
        align-self: center;
        margin-inline: 0;
    }
    .main-trust-item-register .main-trust-register-badge {
        left: calc(108 / 360 * 100%);
        width: calc(144 / 360 * 100%);
    }
    .main-trust-item-register .main-trust-register-tile {
        width: calc(58 / 360 * 100%);
        border-radius: calc(16 / 360 * 100cqw);
        box-shadow: 0 calc(8 / 360 * 100cqw) calc(18 / 360 * 100cqw) rgba(20,40,90,.10);
    }
    .main-trust-item-register .main-trust-register-tile-document {
        left: calc(66 / 360 * 100%);
    }
    .main-trust-item-register .main-trust-register-tile-list,     .main-trust-item-register .main-trust-register-tile-lock {
        left: calc(221 / 360 * 100%);
    }
    .main-trust-item-register .main-trust-register-shield {
        filter: drop-shadow(0 calc(8 / 360 * 100cqw) calc(14 / 360 * 100cqw) rgba(26,79,214,.3));
    }
}

@media (max-width: 480px) {
    .main-trust-item-register .main-trust-register-graphic {
        align-self: flex-end;
        margin-inline-end: calc(min(100%, 300px, calc(137px * 340 / 168)) * (279 - 340) / 340);
    }
    .main-trust-item-register {
        overflow-x: clip;
    }
}

.main-trust-register-graphic.is-ready:not(.is-visible) .main-trust-register-badge {
    opacity: 0;
    transform: scale(.9);
}

.main-trust-register-graphic.is-ready:not(.is-visible) .main-trust-register-tile {
    opacity: 0;
    transform: translateY(10px);
}

.main-trust-register-graphic.is-ready.is-visible .main-trust-register-badge {
    animation: main-trust-register-badge-show .5s ease both;
}

.main-trust-register-graphic.is-ready.is-visible .main-trust-register-tile {
    animation: main-trust-register-tile-show .45s ease both;
}

.main-trust-register-graphic.is-ready.is-visible .main-trust-register-tile-document {
    animation-delay: .25s;
}

.main-trust-register-graphic.is-ready.is-visible .main-trust-register-tile-list {
    animation-delay: .4s;
}

.main-trust-register-graphic.is-ready.is-visible .main-trust-register-tile-lock {
    animation-delay: .55s;
}

@keyframes main-trust-register-badge-show {
    from {
        opacity: 0;
        transform: scale(.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes main-trust-register-tile-show {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-trust-register-graphic.is-ready.is-visible .main-trust-register-badge::before, .main-trust-register-graphic.is-ready.is-visible .main-trust-register-inner::before {
    animation: main-trust-register-halo-pulse 3s ease-in-out 1.05s infinite;
}

@keyframes main-trust-register-halo-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(var(--main-trust-halo-pulse-scale));
        opacity: var(--main-trust-halo-pulse-opacity);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-trust .main-trust-register-graphic[data-motion] .main-trust-register-badge,     .main-trust .main-trust-register-graphic[data-motion] .main-trust-register-tile {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .main-trust .main-trust-register-graphic[data-motion] .main-trust-register-badge::before,     .main-trust .main-trust-register-graphic[data-motion] .main-trust-register-inner::before {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   18. main-pricing
============================================================ */
.main-pricing {
    padding: var(--section-padding-y) 0;
    background: linear-gradient(180deg, var(--color-primary-5) 0%, var(--color-primary-5) 46%, var(--color-bg-white) 100%);
}

.main-pricing-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
    grid-template-areas: "heading pricing" "cta pricing";
    grid-template-rows: max-content minmax(0, 1fr);
    align-items: start;
    gap: var(--main-feature-gap);
    row-gap: 0;
}

.main-process .section-header-title, .main-pricing .section-header-title {
    color: var(--color-text-primary);
}

.main-pricing .section-header {
    grid-area: heading;
    margin-bottom: 0;
}

.main-pricing .section-header-content {
    position: relative;
    max-width: 560px;
}

.main-pricing-cta {
    grid-area: cta;
    justify-self: start;
    margin-top: var(--spacing-24);
}

@media (prefers-reduced-motion: reduce) {
    .main-pricing-cta {
        transition: none;
    }
}

.main-pricing-table {
    grid-area: pricing;
    margin-top: var(--spacing-20);
}

.main-pricing-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
}

.main-pricing-item {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(180px, auto);
    align-items: center;
    min-height: 84px;
    padding: 0 0 var(--spacing-24);
    border-bottom: 1px solid var(--color-border-light);
}

.main-pricing-item + .main-pricing-item {
    padding-top: var(--spacing-24);
}

.main-pricing-label {
    font-size: var(--font-size-body);
    line-height: 1.5;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

.main-pricing-value {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    text-align: right;
    white-space: nowrap;
}

.main-pricing-item:nth-child(2) .main-pricing-value, .main-pricing-item:nth-child(4) .main-pricing-value {
    color: var(--color-primary);
}

.main-pricing-value-discount {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-8);
}

.main-pricing-original {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
    text-decoration: line-through;
}

.main-pricing-arrow {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.main-pricing-current {
    font-size: var(--font-size-h3);
    color: var(--color-primary);
}

.main-pricing-note {
    margin-top: var(--spacing-8);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    text-align: right;
}

/* ============================================================
   20. 반응형
============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-stats,     .main-feature,     .main-review,     .main-trust {
        padding-top: var(--section-padding-y-tablet);
        padding-bottom: var(--section-padding-y-tablet);
    }
    .main-pricing {
        padding-bottom: var(--section-padding-y-tablet);
    }
}

@media (max-width: 1024px) {
    .main-page {
        --main-grid-cols-service: 2;
    }
    .main-payment-service-wrap {
        padding: var(--spacing-64) var(--spacing-40) var(--spacing-80);
    }
    .main-payment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .main-payment-grid > .card,     .main-payment-grid > .card:nth-child(4) {
        grid-column: auto;
    }
    .main-payment-grid > .card:nth-child(5) {
        grid-column: span 2;
    }
    .main-payment-grid .card-title,     .main-service-grid .card-title {
        font-size: var(--font-size-h6);
    }
    .main-payment-grid .card-desc,     .main-service-grid .card-desc {
        font-size: var(--font-size-ui);
    }
    .main-feature {
        --main-feature-gap: 72px;
    }
    .main-feature-item-title {
        font-size: 1.75rem;
    }
    .main-review-quote {
        font-size: var(--font-size-h5);
    }
    .main-pricing {
        padding-top: var(--section-padding-y-tablet);
    }
    .main-process-item-title {
        font-size: var(--font-size-h6);
    }
    .main-process-item-desc {
        font-size: var(--font-size-ui);
    }
    .main-pricing-inner {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        grid-template-rows: auto;
        gap: var(--spacing-32);
    }
    .main-pricing-label {
        font-size: var(--font-size-ui);
    }
    .main-pricing-value,     .main-pricing-current {
        font-size: 1.75rem;
    }
    .main-pricing-original,     .main-pricing-arrow {
        font-size: var(--font-size-h5);
    }
    .main-pricing .section-header {
        grid-area: auto;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .main-pricing .section-header-content {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }
    .main-pricing-table {
        grid-area: auto;
        width: 100%;
        max-width: calc(var(--container-max-width) / 2);
        justify-self: center;
        margin-top: 0;
    }
    .main-pricing-cta {
        grid-area: auto;
        justify-self: center;
        margin-top: calc(var(--spacing-64) - var(--spacing-32));
    }
}

@media (max-width: 768px) {
    .main-stats {
        padding: var(--spacing-80) 0;
    }
    .main-payment-service-wrap {
        padding: var(--spacing-64) var(--spacing-40) 54px;
    }
    .main-payment-grid .card-desc {
        margin-bottom: var(--spacing-4);
    }
    .main-payment-grid .card-desc .desktop-break,     .main-service-grid .card-desc .desktop-break {
        display: inline;
    }
    .main-review {
        padding: var(--spacing-80) 0;
    }
    .main-review-track {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--spacing-16);
        scroll-behavior: auto;
    }
    .main-review-track::-webkit-scrollbar {
        display: none;
    }
    .main-review-card {
        width: 280px;
        min-width: 280px;
        flex-shrink: 0;
        height: auto;
    }
    .main-review-media {
        aspect-ratio: 1.25 / 1;
    }
    .main-review-quote {
        font-size: var(--font-size-h5);
    }
    .main-review-nav {
        display: flex;
    }
    .main-process {
        padding-top: var(--spacing-80);
        padding-bottom: var(--spacing-80);
    }
    .main-process-inner {
        max-width: none;
    }
    .main-process .section-header {
        align-items: center;
        text-align: center;
    }
    .main-process .section-header-eyebrow {
        padding: var(--spacing-4) var(--spacing-12);
        font-size: var(--font-size-body-sm);
    }
    .main-process .section-header-title {
        margin: 0 auto;
        text-align: center;
    }
    .main-process-flow {
        max-width: 560px;
        margin: 0 auto;
    }
    .main-process-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .main-process-item {
        position: relative;
        display: grid;
        min-height: auto;
        padding: 0;
        gap: var(--spacing-24);
        text-align: left;
    }
    .main-process-item:last-child {
        padding-bottom: 0;
    }
    .main-process-step {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-body);
    }
    .main-process-item-content {
        align-items: flex-start;
    }
    .main-process-item-title {
        font-size: var(--font-size-h6);
    }
    .main-process-item-desc {
        font-size: var(--font-size-ui);
    }
    .main-pricing {
        padding-top: var(--section-padding-y-tablet);
        padding-bottom: var(--spacing-64);
    }
    .main-pricing-item {
        min-height: 76px;
    }
    .main-feature {
        padding-top: var(--spacing-80);
        padding-bottom: var(--spacing-80);
    }
    .main-feature-item,     .main-feature-item.is-reverse {
        grid-template-columns: 1fr;
        gap: var(--spacing-32);
    }
    .main-feature-visual {
        order: -1;
    }
    .main-feature-visual,     .main-feature-item.is-reverse .main-feature-visual {
        justify-content: center;
    }
    .main-feature-item:not(.is-reverse) .main-feature-content,     .main-feature-item.is-reverse .main-feature-content {
        justify-self: center;
    }
    .main-feature-content {
        max-width: 480px;
        align-items: center;
        text-align: center;
        gap: var(--spacing-12);
    }
    .main-page {
        --main-feature-visual-ratio: 1.6 / 1;
    }
    .main-feature .img-placeholder,     .main-feature-image {
        max-width: 480px;
    }
    .main-feature-item + .main-feature-item {
        margin-top: var(--spacing-64);
    }
    .main-feature-item-title {
        font-size: var(--font-size-h5);
    }
    .main-feature-item-desc {
        font-size: var(--font-size-body);
    }
}

@media (max-width: 768px) {
    .main-process-inner {
        gap: calc(var(--spacing-64) + var(--spacing-8));
    }
    .main-process-bar {
        display: block;
        top: 22px;
        right: auto;
        bottom: 22px;
        left: 50%;
        width: 44px;
        height: auto;
        transform: translateX(-50%);
        background: linear-gradient(             180deg,             #DCEAFF 0%,             #BCD8FF 28%,             #9EDBFA 52%,             #82DDEB 76%,             #9FE5E8 100%         );
    }
    .main-process-bar-highlight {
        width: 100%;
        height: 34%;
        background: linear-gradient(             180deg,             rgba(255, 255, 255, 0) 0%,             rgba(255, 255, 255, 0.20) 30%,             rgba(255, 255, 255, 0.72) 50%,             rgba(255, 255, 255, 0.20) 70%,             rgba(255, 255, 255, 0) 100%         );
        transform: translateY(-110%);
    }
    .main-process-list::before {
        display: none;
    }
    .main-process-item {
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
        column-gap: var(--spacing-24);
        padding-bottom: 54px;
    }
    .main-process-step {
        grid-column: 2;
        grid-row: 1;
    }
    .main-process-item:nth-child(odd) .main-process-item-content {
        grid-column: 1;
        grid-row: 1;
        align-items: flex-end;
        text-align: right;
    }
    .main-process-item:nth-child(even) .main-process-item-content {
        grid-column: 3;
        grid-row: 1;
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .main-process-flow.is-motion-active .main-process-bar-highlight {
        animation: main-process-bar-sweep-vertical 4s linear infinite;
    }
}

@media (max-width: 700px) {
    .main-payment-grid,     .main-service-grid {
        grid-template-columns: 1fr;
    }
    .main-payment-grid > .card,     .main-payment-grid > .card:nth-child(5) {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .main-stats,     .main-review,     .main-feature {
        padding: calc(var(--spacing-64) - var(--spacing-8)) 0;
    }
    .main-payment-service-wrap {
        padding: var(--spacing-64) var(--spacing-20) var(--spacing-64);
    }
    .main-service {
        margin-top: var(--spacing-80);
    }
    .main-payment-grid,     .main-service-grid {
        gap: var(--spacing-16);
    }
    .main-page {
        --main-payment-service-card-radius: var(--radius-xl);
    }
    .main-process {
        padding-top: calc(var(--spacing-64) - var(--spacing-8));
        padding-bottom: calc(var(--spacing-64) - var(--spacing-8));
    }
    .main-pricing {
        padding-top: var(--section-padding-y-mobile);
        padding-bottom: var(--spacing-64);
    }
    .main-pricing-cta {
        justify-self: stretch;
        margin-top: calc(var(--spacing-48) - var(--spacing-32));
    }
    .main-pricing-item {
        grid-template-columns: minmax(0, 1fr) max-content;
        min-height: 72px;
        gap: var(--spacing-8);
        padding-bottom: var(--spacing-16);
    }
    .main-pricing-item + .main-pricing-item {
        padding-top: var(--spacing-16);
    }
    .main-pricing-value,     .main-pricing-current {
        font-size: var(--font-size-h4);
    }
    .main-review-card {
        width: 82%;
        min-width: 0;
    }
    .main-feature-item,     .main-feature-item.is-reverse {
        gap: var(--spacing-24);
    }
}

@media (max-width: 360px) {
    .main-page {
        --main-payment-card-min-height: 76px;
        --main-service-card-min-height: 100px;
    }
    .main-feature-item,     .main-feature-item.is-reverse {
        gap: var(--spacing-20);
    }
    .main-feature-content {
        gap: var(--spacing-8);
    }
    .main-feature-item-title {
        font-size: var(--font-size-h5);
    }
    .main-payment-grid .card-title,     .main-service-grid .card-title {
        font-size: var(--font-size-h6);
    }
    .main-review-quote {
        font-size: var(--font-size-h6);
    }
    .main-pricing-value {
        font-size: 1.375rem;
    }
    .main-pricing-current {
        font-size: 1.375rem;
    }
    .main-pricing-item {
        min-height: 64px;
        gap: var(--spacing-4);
        padding-bottom: var(--spacing-8);
    }
    .main-pricing-item + .main-pricing-item {
        padding-top: var(--spacing-8);
    }
}

#main-hero-title, #main-feature-title, #main-payment-title, #main-service-title {
    color: var(--color-text-primary);
}

/* ============================================================
   21. 메인 반응형 Section Title Scale
============================================================ */
.main-page .section-header-title {
    line-height: 1.4;
}

@media (max-width: 768px) {
    .main-page .section-header-title {
        font-size: 2.125rem;
    }
}

@media (max-width: 480px) {
    .main-page .section-header-title {
        font-size: 1.875rem;
        line-height: 1.35;
    }
    .main-page .section-header-title-mobile-multiline {
        line-height: 1.35;
    }
}

@media (max-width: 360px) {
    .main-page .section-header-title {
        font-size: 1.75rem;
    }
}

/* ============================================================
   21-1. 메인 공통 Section Header → Content 간격
============================================================ */
.main-page .section-header-center {
    margin-bottom: var(--spacing-64);
}

@media (max-width: 1024px) {
    .main-page .section-header-center {
        margin-bottom: var(--spacing-48);
    }
}

@media (max-width: 768px) {
    .main-page .section-header-center {
        margin-bottom: var(--spacing-32);
    }
}

/* ============================================================
   22. 메인 제목 줄바꿈 전용 break 클래스
============================================================ */
.main-process-title-br, .main-section-title-br {
    display: none;
}

@media (max-width: 389px) {
    .main-process-title-br {
        display: inline;
    }
    .main-process .section-header-title {
        line-height: 1.35;
    }
}

.main-360-break {
    display: none;
}

@media (max-width: 360px) {
    .main-360-break {
        display: inline;
    }
}

@media (max-width: 480px) {
    .main-section-title-br {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-page .fade-in-up,     .main-page .fade-in-up.is-ready,     .main-page .fade-in-up.is-ready.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.main-page .main-trust [data-motion].is-reveal-complete :is(.main-trust-chat, .main-trust-code-line, .main-trust-register-badge, .main-trust-register-tile, .main-trust-warning-point) {
    opacity: 1;
    transform: none;
    animation: none;
}

.main-page .main-trust [data-motion].is-reveal-complete .main-trust-transaction-line {
    animation: none;
    stroke-dashoffset: 0;
}

.main-page .main-trust [data-motion].is-reveal-complete .main-trust-warning-ring {
    animation: none;
    opacity: 0.4;
    transform: none;
}

.main-trust-code-line.is-typing::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    align-self: center;
    margin-left: 1px;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* Talk Payment Icon Motion */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .main-service-grid .card-body:hover .main-service-talk-motion-bubble {
        animation: main-service-talk-bubble 660ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-talk-motion-dot {
        animation: main-service-talk-dot 620ms ease-in-out 1;
    }
    .main-service-grid .card-body:hover .main-service-talk-motion-dot:nth-of-type(2) {
        animation-delay: 80ms;
    }
    .main-service-grid .card-body:hover .main-service-talk-motion-dot:nth-of-type(3) {
        animation-delay: 160ms;
    }
}

@keyframes main-service-talk-bubble {
    0%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-1.2px);
    }
    72% {
        transform: translateY(0.3px);
    }
}

@keyframes main-service-talk-dot {
    0%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-1.8px);
    }
    72% {
        transform: translateY(0.3px);
    }
}