/*
 * Styling för Fortnox-landningssidan (fortnox.jsp / en/fortnox.jsp).
 * SVG-grafiken ligger i decorators/fortnox-graphics.jsp.
 */

/* Panel runt varje SVG-illustration */
.fx-svg-panel {
    background: linear-gradient(160deg, #f4f9fd 0%, #e8f1f8 100%);
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
    padding: 1rem;
}

.fx-svg-panel svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Animerade flödespilar i diagrammen */
.fx-flow-line {
    stroke: var(--accent-color, #2b7cbf);
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 10 8;
    animation: fx-dash 1.6s linear infinite;
}

.fx-flow-line--slow {
    animation-duration: 2.4s;
}

@keyframes fx-dash {
    to { stroke-dashoffset: -18; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-flow-line { animation: none; }
}

/* Kundcitat i referenssektionen */
.fx-quote {
    background: linear-gradient(160deg, #f4f9fd 0%, #e8f1f8 100%);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}

.fx-quote-icon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--accent-color, #2b7cbf);
    display: block;
}

/* Numrerade steg i "Kom igång"-sektionen */
.fx-step-number {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--accent-color, #2b7cbf);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}