/* About page, part 2: journey timeline, call band and questions block
   (Zeinet home-four: price-three, video-section, faq-two). */

/* Journey: a rail across the stages, a ringed marker per stage, cards below. */
.zn-timeline { position: relative; display: grid; grid-template-columns: repeat(var(--stages, 4), minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.zn-timeline::before { content: ''; position: absolute; top: 47px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); opacity: 0.35; }
.zn-timeline__item { position: relative; display: flex; flex-direction: column; }
.zn-timeline__stage { display: block; margin-bottom: 18px; color: var(--primary); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.zn-timeline__node { position: relative; z-index: 1; width: 22px; height: 22px; margin-bottom: 30px; border: 6px solid var(--primary); border-radius: 50%; background: var(--white); box-shadow: 0 0 0 8px var(--surface); transition: transform 0.4s var(--ease); }
.zn-timeline__card { flex: 1; padding: 32px 28px; border: 1px solid var(--border); border-top: 3px solid var(--secondary); border-radius: 0 0 6px 6px; background: var(--white); transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.zn-timeline__card h3 { margin-bottom: 12px; font-size: 21px; font-weight: 600; }
.zn-timeline__card p { margin: 0; font-size: 15px; line-height: 26px; }
.zn-timeline__item:hover .zn-timeline__card { border-top-color: var(--primary); box-shadow: 0 18px 40px rgba(1, 42, 61, 0.08); transform: translateY(-6px); }
.zn-timeline__item:hover .zn-timeline__node { transform: scale(1.2); }

/* Call band: blue with light diagonal beams and a ringed photo disc. */
.zn-callband { position: relative; overflow: hidden; padding: 120px 0; background: var(--navy-deep); color: rgba(255, 255, 255, 0.85); }
.zn-callband::before, .zn-callband::after { content: ''; position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.06); transform: skewX(-35deg); }
.zn-callband::before { left: 18%; width: 140px; }
.zn-callband::after { left: 34%; width: 60px; }
.zn-callband__photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.16; mix-blend-mode: luminosity; }
.zn-callband .container { position: relative; z-index: 1; }
.zn-callband h2 { color: var(--white); font-size: clamp(32px, 4vw, 50px); margin-bottom: 18px; }
.zn-callband p { max-width: 620px; margin-bottom: 34px; }
.zn-disc {
    position: relative;
    width: 330px; height: 330px;
    margin-left: auto;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--secondary);
}
.zn-disc::before { content: ''; position: absolute; inset: 28px; border-radius: 50%; background: rgba(1, 28, 41, 0.92); }
.zn-disc a { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--white); font-size: 22px; font-weight: 600; }
.zn-disc__icon {
    width: 86px; height: 86px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    font-size: 26px;
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.12);
}
.zn-disc a:hover { color: var(--primary); }

/* Questions block: photo between orange/blue colour slabs, accordion right. */
.zn-faq__media { position: relative; padding: 120px 0; }
.zn-faq__media::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40vw; right: 25%; background: var(--secondary); }
.zn-faq__media::after { content: ''; position: absolute; top: 0; bottom: 0; right: 10%; width: 56px; background: var(--primary); }
.zn-faq__media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; border-radius: 0 8px 8px 0; display: block; }
.zn-accordion .accordion-item { margin-bottom: 20px; border: 1px solid var(--border); border-radius: 0; }
.zn-accordion .accordion-button {
    padding: 24px 30px;
    background: var(--white);
    color: var(--secondary);
    font-family: var(--font);
    font-size: 17px;
    font-weight: 600;
    box-shadow: none;
}
.zn-accordion .accordion-button:not(.collapsed) { background: var(--primary); color: var(--white); }
.zn-accordion .accordion-button::after { background-image: none; content: '+'; font-size: 24px; font-weight: 400; line-height: 1; transform: none; width: auto; height: auto; }
.zn-accordion .accordion-button:not(.collapsed)::after { content: '\2212'; }
.zn-accordion .accordion-body { padding: 24px 30px; }

@media (max-width: 991px) {
    /* Timeline turns vertical: rail down the left, markers on it. */
    .zn-timeline { grid-template-columns: 1fr; gap: 26px; padding-left: 40px; }
    .zn-timeline::before { top: 6px; bottom: 6px; left: 10px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--primary), var(--secondary)); }
    .zn-timeline__node { position: absolute; left: -40px; top: 0; margin: 0; }
    .zn-timeline__stage { margin-bottom: 12px; }
    .zn-disc { margin: 50px auto 0; width: 280px; height: 280px; }
    .zn-faq__media { padding: 0; margin-bottom: 10px; }
    .zn-faq__media::before, .zn-faq__media::after { display: none; }
    .zn-faq__media img { border-radius: 0; }
}