/* ==========================
   CIRCLE METHOD
========================== */
.circle-sec {
    background: var(--paper)
}

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

/* ── Left: step list ── */
.c-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px
}

.c-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    transition: all .28s;
    cursor: default
}

.c-step:hover {
    border-color: var(--blue);
    box-shadow: 0 6px 26px rgba(37, 99, 235, .09);
    transform: translateX(3px)
}

.c-badge {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18)
}

.c-body h4 {
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px
}

.c-body h4 .ltr {
    font-size: 1rem;
    font-weight: 900
}

.c-body p {
    font-size: .83rem;
    color: var(--slate);
    line-height: 1.6
}

/* ── Right: visual diagram ── */
.circle-diagram {
    position: sticky;
    top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.cd-wrap {
    position: relative;
    width: 480px;
    height: 480px;
    flex-shrink: 0
}

/* center hub */
.cd-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--navy), var(--royal));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
    box-shadow: 0 16px 52px rgba(26, 58, 143, .45);
}

.cd-hub-t {
    font-family: 'Fraunces', serif;
    font-size: 1rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.25
}

.cd-hub-s {
    font-size: .62rem;
    color: rgba(255, 255, 255, .5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    font-weight: 600
}

/* dashed orbit ring */
.cd-ring {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    border: 2px dashed rgba(37, 99, 235, .22);
    animation: spin 30s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg) }
}

/* nodes — 480px box, center=240, radius=184, node=96px, offset=48 */
/* C1: θ=-90°  → left=240-0-48=192    top=240-184-48=8    */
/* I:  θ=-30°  → left=240+159-48=351  top=240-92-48=100   */
/* R:  θ=30°   → left=240+159-48=351  top=240+92-48=284   */
/* C2: θ=90°   → left=240-0-48=192    top=240+184-48=376  */
/* L:  θ=150°  → left=240-159-48=33   top=240+92-48=284   */
/* E:  θ=210°  → left=240-159-48=33   top=240-92-48=100   */
.cd-node {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    transition: transform .25s;
    cursor: default;
    z-index: 4;
}

.cd-node:hover {
    transform: scale(1.1) !important
}

.cd-char {
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
    line-height: 1
}

.cd-word {
    font-size: .58rem;
    color: rgba(255, 255, 255, .9);
    font-weight: 700;
    line-height: 1.35;
    margin-top: 3px;
    letter-spacing: .2px
}

.cdn-c1 { top: 8px;   left: 192px; background: linear-gradient(135deg, #1a3a8f, #3b82f6) }
.cdn-i  { top: 100px; left: 351px; background: linear-gradient(135deg, #0369a1, #38bdf8) }
.cdn-r  { top: 284px; left: 351px; background: linear-gradient(135deg, #065f46, #10b981) }
.cdn-c2 { top: 376px; left: 192px; background: linear-gradient(135deg, #92400e, #f59e0b) }
.cdn-l  { top: 284px; left: 33px;  background: linear-gradient(135deg, #5b21b6, #a78bfa) }
.cdn-e  { top: 100px; left: 33px;  background: linear-gradient(135deg, #9d174d, #f472b6) }

/* connector lines */
.cd-lines {
    position: absolute;
    inset: 0;
    z-index: 1
}

.cd-lines line {
    stroke: rgba(37, 99, 235, .18);
    stroke-width: 2;
    stroke-dasharray: 5 5
}

/* ── Mobile step mini-node (hidden on desktop) ── */
.c-step-node {
    display: none;
}

/* ==========================
   RESPONSIVE
========================== */

/* Tablet: shrink diagram a bit */
@media (max-width: 1100px) {
    .cd-wrap { width: 400px; height: 400px }
    /* center=200, r=152, node=80, offset=40 */
    .cd-node { width: 80px; height: 80px }
    .cd-hub  { width: 126px; height: 126px }
    .cd-hub-t { font-size: .9rem }
    .cd-char  { font-size: 1.65rem }
    /* C1: top=8  left=160  */
    /* I:  top=84 left=292  */
    /* R:  top=236 left=292 */
    /* C2: top=312 left=160 */
    /* L:  top=236 left=28  */
    /* E:  top=84  left=28  */
    .cdn-c1 { top: 8px;   left: 160px }
    .cdn-i  { top: 84px;  left: 292px }
    .cdn-r  { top: 236px; left: 292px }
    .cdn-c2 { top: 312px; left: 160px }
    .cdn-l  { top: 236px; left: 28px  }
    .cdn-e  { top: 84px;  left: 28px  }
}

/* Mobile: hide diagram, show stacked steps with inline node */
@media (max-width: 768px) {
    .circle-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Hide the right-column diagram entirely */
    .circle-diagram {
        display: none;
    }

    .c-steps {
        margin-top: 20px;
        gap: 14px;
    }

    /* Show the mini colored circle on mobile */
    .c-step-node {
        display: flex;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-family: 'Fraunces', serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    }

    /* Hide the square badge on mobile (replaced by round node) */
    .c-badge {
        display: none;
    }

    .c-step {
        align-items: center;
        padding: 16px;
        gap: 14px;
    }

    .c-body h4 {
        font-size: .95rem;
    }

    .c-body p {
        font-size: .82rem;
    }
}