.cyber {
    display: grid;
    gap: var(--space-12);
}

.chapter {
    display: grid;
    gap: var(--space-4);
    max-width: 60ch;
}

.cyber-title {
    color: var(--color-green);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: clamp(var(--fs-2xl), 4vw, 3rem);
}

.cyber-sub {
    color: var(--color-text-muted);
    line-height: 1.7;
}

.cyber-bridge {
    color: var(--color-text-muted);
    opacity: 0.85;
}

.hint {
    align-items: center;
    grid-auto-flow: column;
    width: fit-content;
    gap: var(--space-2);
    opacity: 0.8;
}

.hint-line {
    display: inline-block;
    width: 48px;
    height: 1px;
    background: rgba(122,74,46,0.35); /* brown low opacity */
}

.hint-text {
    color: var(--color-text-muted);
}

.section-title {
    color: var(--text-main);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--fs-xl);
}

.points {
    display: grid;
    gap: var(--space-2);
    padding-left: 1rem;
}

.points li {
    color: var(--text-main);
}

.section-close,
.note,
.meta {
    color: var(--color-text-muted);
}

.cta-button {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 10px 14px;
    border: 1px solid rgba(201,162,77,0.45);
    color: var(--color-amber);
    text-decoration: none;
    letter-spacing: 0.06em;
    text-underline-offset: 6px;
    transition: color var(--duration-2) var(--ease-out), border-color var(--duration-2) var(--ease-out);
}

.cta-button:hover,
.cta-button:focus-visible {
    border-color: var(--color-amber);
    color: var(--color-amber);
}

/* Reveal-once hook */
[data-reveal],
.reveal-once {
    opacity: 0;
    transform: translateY(12px);
}

.is-visible {
    animation: revealUp 600ms var(--ease-out) forwards;
}

@media (max-width: 900px) {
    .cyber { gap: var(--space-10); }
}