.home-comparison-flow {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background:
        radial-gradient(circle at 15% 18%, rgba(201, 164, 93, 0.16), transparent 22%),
        radial-gradient(circle at 85% 12%, rgba(3, 52, 107, 0.12), transparent 24%),
        linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
}

.home-comparison-flow::before,
.home-comparison-flow::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(0.5px);
}

.home-comparison-flow::before {
    top: 72px;
    left: -120px;
    width: 280px;
    height: 280px;
    background: linear-gradient(135deg, rgba(3, 52, 107, 0.08), rgba(3, 52, 107, 0));
}

.home-comparison-flow::after {
    right: -100px;
    bottom: 40px;
    width: 240px;
    height: 240px;
    background: linear-gradient(135deg, rgba(201, 164, 93, 0.12), rgba(201, 164, 93, 0));
}

.home-comparison-shell { position: relative; z-index: 1; }

.comparison-flow-intro {
    width: min(760px, calc(100% - 48px));
    margin: 0 auto 48px;
    text-align: center;
}

.comparison-flow-title {
    margin: 0;
    color: #03346B;
    font-size: clamp(2.1rem, 4.2vw, 4.3rem);
    line-height: 1.16;
    letter-spacing: -0.03em;
}

.comparison-flow-lead {
    max-width: 680px;
    margin: 24px auto 0;
    color: #35506f;
    font-size: 1.05rem;
    line-height: 1.95;
}

.comparison-visual {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.9fr 1.05fr;
    gap: 26px;
    align-items: center;
    padding: 38px;
    border: 1px solid rgba(3, 52, 107, 0.10);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 60px rgba(3, 52, 107, 0.10);
}

.comparison-visual-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 50%),
        radial-gradient(circle at 50% 50%, rgba(3, 52, 107, 0.04), transparent 45%);
    pointer-events: none;
}

.comparison-column { position: relative; z-index: 1; }
.comparison-column-sources { display: grid; gap: 18px; }

.comparison-node {
    position: relative;
    padding: 22px 22px 20px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(3, 52, 107, 0.11);
    box-shadow: 0 16px 34px rgba(3, 52, 107, 0.08);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    overflow: hidden;
}

.comparison-node::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(201, 164, 93, 0.12), transparent 62%);
    opacity: 0;
    transition: opacity .35s ease;
}

.comparison-node:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 164, 93, 0.38);
    box-shadow: 0 18px 40px rgba(3, 52, 107, 0.12);
}

.comparison-node:hover::after { opacity: 1; }

.node-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(3, 52, 107, 0.08);
    color: #03346B;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.comparison-node strong,
.comparison-result-card h3,
.comparison-hub-core strong {
    display: block;
}

.comparison-node strong {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    color: #03346B;
    font-size: 1.18rem;
    line-height: 1.35;
}

.comparison-node small {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8px;
    color: #5e7088;
    font-size: 0.93rem;
    line-height: 1.7;
}

.comparison-column-center {
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-hub-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-hub-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 164, 93, 0.18) 0%, rgba(201, 164, 93, 0.06) 38%, rgba(201, 164, 93, 0) 68%);
    filter: blur(6px);
}

.comparison-hub {
    position: relative;
    width: 292px;
    height: 292px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-hub-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(3, 52, 107, 0.12);
}

.comparison-hub-ring-a { inset: 0; animation: hubRotate 18s linear infinite; }
.comparison-hub-ring-b { inset: 18px; border-color: rgba(201, 164, 93, 0.40); animation: hubRotateReverse 13s linear infinite; }
.comparison-hub-ring-c { inset: 36px; border-color: rgba(255, 255, 255, 0.38); }

.hub-orbit-dot {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C9A45D 0%, #e2cb9a 100%);
    box-shadow: 0 0 0 7px rgba(201, 164, 93, 0.16);
    animation: pulseGlow 2.4s ease-out infinite;
}

.hub-orbit-dot-a { top: 50%; left: -4px; transform: translate(-50%, -50%); }
.hub-orbit-dot-b { top: 50%; right: -4px; transform: translate(50%, -50%); animation-delay: .8s; }
.hub-orbit-dot-c { top: 18px; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.5s; }

.comparison-hub-core {
    position: relative;
    z-index: 1;
    width: 192px;
    height: 192px;
    border-radius: 50%;
    padding: 20px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #03346B 0%, #0a4a94 100%);
    box-shadow: 0 22px 52px rgba(3, 52, 107, 0.24);
    color: #ffffff;
}

.hub-brand {
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: 0.02em;
    font-weight: 800;
}

.hub-divider {
    display: block;
    width: 62px;
    height: 2px;
    margin: 14px auto 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(201, 164, 93, 0), rgba(201, 164, 93, 1), rgba(201, 164, 93, 0));
}

.hub-feature {
    display: block;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.25;
}

.flow-line {
    position: absolute;
    top: 50%;
    width: 118px;
    height: 2px;
    background: linear-gradient(90deg, rgba(201, 164, 93, 0), rgba(201, 164, 93, 0.85), rgba(3, 52, 107, 0.16));
    transform: translateY(-50%);
    overflow: hidden;
}

.flow-line::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -30px;
    width: 30px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(201, 164, 93, 1), rgba(255,255,255,0));
    animation: flowMove 2.6s ease-in-out infinite;
}

.flow-line-left { left: -68px; }
.flow-line-right { right: -68px; }
.flow-line-right::after { animation-delay: 1.1s; }

.flow-pulse {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #C9A45D;
    box-shadow: 0 0 0 0 rgba(201, 164, 93, 0.38);
    animation: pulseGlow 2.2s ease-out infinite;
}

.flow-pulse-a { left: 48px; }
.flow-pulse-b { right: 48px; animation-delay: 1.1s; }

.comparison-column-result { display: flex; justify-content: flex-end; }

.comparison-result-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    padding: 28px 26px;
    border-radius: 28px;
    color: #03346B;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    border: 1px solid rgba(3, 52, 107, 0.10);
    box-shadow: 0 18px 40px rgba(3, 52, 107, 0.10);
}

.comparison-result-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(201, 164, 93, 0.16), transparent 48%);
    pointer-events: none;
}

.result-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(201, 164, 93, 0.16);
    color: #9a7533;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.comparison-result-card h3 {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    font-size: 1.9rem;
    line-height: 1.34;
}

.comparison-result-card p {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    color: #5e7088;
    font-size: 0.96rem;
    line-height: 1.85;
}

.comparison-result-points {
    position: relative;
    z-index: 1;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.comparison-result-points li {
    position: relative;
    padding-left: 26px;
    color: #35506f;
    font-size: 0.92rem;
    line-height: 1.7;
}

.comparison-result-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.56em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C9A45D 0%, #e1c48a 100%);
    box-shadow: 0 0 0 4px rgba(201, 164, 93, 0.16);
    transform: translateY(-50%);
}

.comparison-flow-bottom { margin-top: 28px; }

.comparison-bottom-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(3, 52, 107, 0.08);
    box-shadow: 0 18px 38px rgba(3, 52, 107, 0.08);
}

.comparison-bottom-title {
    margin: 0;
    color: #03346B;
    font-size: 1.1rem;
    font-weight: 700;
}

.comparison-bottom-text {
    margin: 10px 0 0;
    color: #5e7088;
    font-size: 0.95rem;
    line-height: 1.8;
}

.comparison-flow-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    background: #03346B;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
    box-shadow: 0 14px 28px rgba(3, 52, 107, 0.18);
}

.comparison-flow-cta span {
    display: inline-flex;
    color: #C9A45D;
    font-size: 1.1rem;
    transition: transform .28s ease;
}

.comparison-flow-cta:hover {
    transform: translateY(-3px);
    background: #0a4a94;
    box-shadow: 0 18px 34px rgba(3, 52, 107, 0.22);
}

.comparison-flow-cta:hover span { transform: translateX(3px); }
.reveal-up.delay-1 { animation-delay: .08s; }
.reveal-up.delay-2 { animation-delay: .16s; }

@keyframes hubRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hubRotateReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes flowMove { 0% { left: -34px; opacity: 0; } 12% { opacity: 1; } 100% { left: calc(100% + 10px); opacity: 0; } }
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(201, 164, 93, 0.42); } 70% { box-shadow: 0 0 0 14px rgba(201, 164, 93, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 164, 93, 0); } }

@media (max-width: 1100px) {
    .comparison-visual { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
    .comparison-column-center { min-height: 320px; }
    .flow-line, .flow-pulse-a, .flow-pulse-b { display: none; }
    .comparison-column-result { justify-content: stretch; }
    .comparison-result-card { max-width: none; }
}

@media (max-width: 767px) {
    .home-comparison-flow { padding: 82px 0; }
    .comparison-flow-intro {
        width: calc(100% - 28px);
        margin-bottom: 34px;
        text-align: left;
    }
    .comparison-flow-title { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.18; }
    .comparison-flow-lead { margin-top: 18px; font-size: 0.96rem; line-height: 1.82; }
    .comparison-visual { padding: 20px; border-radius: 24px; }
    .comparison-column-sources { gap: 14px; }
    .comparison-node { padding: 18px; border-radius: 20px; }
    .comparison-node strong { font-size: 1.06rem; }
    .comparison-column-center { min-height: 264px; }
    .comparison-hub-glow { width: 250px; height: 250px; }
    .comparison-hub { width: 230px; height: 230px; }
    .comparison-hub-ring-b { inset: 14px; }
    .comparison-hub-ring-c { inset: 28px; }
    .comparison-hub-core { width: 154px; height: 154px; padding: 14px 12px; }
    .hub-brand { font-size: 1.42rem; }
    .hub-divider { width: 48px; margin: 10px auto 10px; }
    .hub-feature { font-size: 0.80rem; letter-spacing: 0.12em; }
    .comparison-result-card { padding: 22px 20px; border-radius: 22px; }
    .comparison-result-card h3 { font-size: 1.45rem; }
    .comparison-bottom-card { flex-direction: column; align-items: stretch; padding: 22px 20px; }
    .comparison-flow-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .comparison-hub-ring-a,
    .comparison-hub-ring-b,
    .flow-line::after,
    .flow-pulse,
    .hub-orbit-dot { animation: none !important; }
    .comparison-node,
    .comparison-flow-cta { transition: none !important; }
}

/* Keep the section background full-width while constraining the diagram and lower CTA. */
.comparison-visual,
.comparison-flow-bottom {
    width: min(1180px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .comparison-visual,
    .comparison-flow-bottom {
        width: min(100%, calc(100% - 32px));
    }
}